javascript - ScrollFire物化显示列表

您好，我正在寻找以下问题的可能解决方案。

我正在建立一个网站，我有一个表，其中有很多行。
我正在使用物化（但是如果有另一个插件可以做到这一点，我会为此开放）。

实现使用此

 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);

但是如何在表行上实现它呢？

我只想隐藏大多数行，但是当用户向下滚动时，它们就可见。

这可能吗？
谢谢

最佳答案

而不是滚动，我做了一个按钮，以使用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();
});

}