Question

我有一个<table>有很多行（大约10.000）但我只是想在我访问页面时显示前20行，当我滚动到表格底部时我想要显示下一个20行记录等。我不想使用ajax，因为我在加载页面时加载了整个数据。我看到的所有无限滚动插件都使用了ajax。您知道快速简便的解决方案吗？

我已经尝试过插件jscroll，但它只能使用ajax！

谢谢！

Answer 1

我不知道任何可以执行您要求的内容的lib或扩展，但您可以尝试制作自己的脚本，因为这是一个特殊情况。

我尝试构建一个JS函数来显示N行。

使用如下表格：

<table id="myTable">
  <tr>...</tr>
  <tr>...</tr>
  ...
</table>

开始在CSS中隐藏display: none;的所有行

#myTable tr{ display: none; }

现在我们必须编写一个在时间显示N行的函数

function showRows(_max){
    $("#myTable tr").each(function(_ind, _el){
        if (_ind >= showRows.current && _ind < showRows.current +_max) $(_el).show();
    });
    showRows.current += _max;
}
showRows.current = 0;

下一步是在滚动事件到达底部时使用此方法

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()){
        showRows(20);   // 20 is the next number of elements to display
    }
});

我想，这就是全部这里是DEMO

以上showRows()的代码未经过优化（性能优异），但仍然可以正常工作。
否则用这个替换它应该更快：

function showRows(_max){ 
    var rows = document.getElementById("myTable").getElementsByTagName("tr");
    for (var ind = showRows.current, ln = rows.length; ind < ln; ind++){
        if ( ind < showRows.current+_max) rows[ind].style.display = "table-row";
        else break;
    }
    showRows.current += _max;
}
showRows.current = 0;

假无限滚动（jQuery）

1 个答案: