javascript - 假无限滚动(jQuery)

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 7 年前。

Improve this question

我有一个<table>有很多行(大约 10.000)，但我只想在访问页面时显示前 20 行，当我滚动到表格底部时，我想显示接下来的 20 条记录，依此类推。我不想使用ajax，因为我在加载页面时加载整个数据。我看到的所有无限滚动插件都可以与 ajax 配合使用。您知道快速且简单的解决方案吗？

我已经尝试过插件 jscroll，但它只能与 ajax 一起使用!

谢谢!

Answer 1

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

<小时/>

我将尝试构建一个 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;