javascript - ScrollFire Materialize 显示列表

Question

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

我正在建立一个网站，我有一个包含很多行的表格。我正在使用物化(但如果有另一个插件可以做到这一点，我愿意接受)。

Materialize 使用这个

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