如何使用 Javascript 滚动到底部时附加更多行

It's in 共享点2010年，但我认为它可能会正常运行。

1。默认情况下，每页的项目限制为 30。因此，我已经完成了在页面加载时显示 30 行的列表，然后我将鼠标向下滚动到底部，它隐藏了最后 10 行。

Summary：页面加载 30 行 -> 向下滚动到底部 -> 显示 20 行（隐藏最后 10 行）。

对于给您带来的不便，我们深表歉意，但它要求我至少有 10 个声誉才能发布图片或超过 2 个链接。

物品限制：[http://upanh.biz/images/2014/03/27/itemlimit.png]

当向下滚动到底部时：http://upanh.biz/images/2014/03/27/bottom.png http://upanh.biz/images/2014/03/27/bottom.png

列表已更改：http://upanh.biz/images/2014/03/27/final.png http://upanh.biz/images/2014/03/27/final.png

问题：我不知道如何在向下滚动到页面底部时追加 10 行而不重新加载（项目限制可以修改为每页 100 个项目）。

Summary：页面加载 30 行 -> 向下滚动到底部 -> 显示 40 行

JavaScript for 1:

$(document).ready(function() {
$('#WebPartWPQ1 table table').eq(0).attr("id", "myNewTable");
$("#myNewTable tr").slice(30).hide();
var rowCount = $('#myNewTable tr').length;
//alert(rowCount);
$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        $("#myNewTable tr").slice(20).hide();
        alert("bottom");
    }
});

HTML

<div id="WebPartWPQ1">
<div>
    <table>
    <table>
        <tbody>
            <tr><td>something1</td></tr>
            <tr><td>something2</td></tr>
            <tr><td>something3</td></tr>
            <tr><td>something4</td></tr>
            <tr><td>something5</td></tr>
            <tr><td>something6</td></tr>
            <tr><td>something7</td></tr>
            <tr><td>something8</td></tr>
            <tr><td>something9</td></tr>
            <tr><td>something10</td></tr>
            <tr><td>something11</td></tr>
            <tr><td>something12</td></tr>
            <tr><td>something13</td></tr>
            <tr><td>something14</td></tr>
            <tr><td>something15</td></tr>
            <tr><td>something16</td></tr>
            <tr><td>something17</td></tr>
            <tr><td>something18</td></tr>
            <tr><td>something19</td></tr>
            <tr><td>something20</td></tr>
            <tr><td>something21</td></tr>
            <tr><td>something22</td></tr>
            <tr><td>something23</td></tr>
            <tr><td>something24</td></tr>
            <tr><td>something25</td></tr>
            <tr><td>something26</td></tr>
            <tr><td>something27</td></tr>
            <tr><td>something28</td></tr>
            <tr><td>something29</td></tr>
            <tr><td>something30</td></tr>
            <tr><td>...more rows...</td></tr>
        </tbody>
    </table>
    </table>
    <table class="ms-bottompaging">something</table>
    <table id="Hero-WPQ1">something</table>
</div>

我想，这对你有用

 $(document).ready(function() { 
   $('#WebPartWPQ1 table table').eq(0).attr("id", "myNewTable"); 
   $("#myNewTable tr").slice(30).hide(); 
   var rowCount = $('#myNewTable tr').length; 
   //alert(rowCount); 
   var y = 0;
   $(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
      $("#myNewTable tr").slice(20).hide();
      var x = 0;
        /* Append next ten rows here */
        if(y < 20){ /* Maximum row you want to add*/
         for(var i=0;i<10;i++){
           x++;
           $("#myNewTable").append("<tr><td>something"+rowCount+i+"</td></tr>");
         }
         y += x;
        }else{
         return false;
        }
     } 
   });

如果要显示数据库中接下来的 10 行数据，请使用 jquery 的 ajax() 而不是 for 循环。