ScrollFire Materialize reveal列表

Question

嗨，我正在尋找一個可能的解決方案，以解決以下問題。

我正在建設一個網站，我有一個表有許多行。 我正在使用物化（但如果有另一個插件可以做到這一點，我打開它）。

Materialise的使用這個

var options = [ 
    {selector: '#staggered-test', offset: 50, callback: function(el) { 
    Materialize.toast("This is our ScrollFire Demo!", 1500); 
    } }, 
    {selector: '#staggered-test', offset: 205, callback: function(el) { 
    Materialize.toast("Please continue scrolling!", 1500); 
    } }, 
    {selector: '#staggered-test', offset: 400, callback: function(el) { 
    Materialize.showStaggeredList($(el)); 
    } }, 
    {selector: '#image-test', offset: 500, callback: function(el) { 
    Materialize.fadeInImage($(el)); 
    } } 
]; 
Materialize.scrollFire(options); 

但如何實現它的錶行？

我只想隱藏大部分行，但顯示得越多，用戶就會滾動下來。

這可能嗎？ 感謝

Answer 1

而是滾動的我犯了一個按鈕來顯示更多的使用JavaScript和jQuery這裏是功能

$.fn.RowReveal = function(RowsToShow, numMore) { 

var numShown = RowsToShow; 
var numMore = numMore; 

var $table = $(this).find('tbody'); 
var numRows = $table.find('tr').length; 

var btn_id = parseInt(Math.random()*1000)+numRows; 

// Hide rows and add clickable div 
$table.find('tr:gt(' + (numShown - 1) + ')').hide().end() 
    .after('<tbody id="more-'+btn_id+'"><tr><td colspan="' + 
     $table.find('tr:first td').length + '"><div>Show More</div></tbody></td></tr>'); 

$('#more-'+btn_id).click(function() { 
    numShown = numShown + numMore; 
    if (numShown >= numRows) { 
     $('#more-'+btn_id).remove(); 
    } 
    if (numRows - numShown < numMore) { 
     $('#more-'+btn_id+' span').html(numRows - numShown); 
    } 
    $table.find('tr:lt(' + numShown + ')').fadeIn(); 
}); 

}