使用Javascript滚动到底部时如何附加更多行 [英] How to append more rows when scrolling to the Bottom with Javascript

问题描述

它位于 SharePoint 2010中，但我认为它可能会正常运行。

It's in SharePoint 2010, but I think It might run as it's normal.

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

1. The Item Limit per page is 30 as default. Thus, I have done with the list which showed 30 rows at the Page Load, then I have scrolled the mouse down to the Bottom and it hidden the last 10 rows.

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

Summary: Page loads 30 rows -> scroll down to the Bottom -> display 20 rows (hide the last 10-row).

抱歉造成这种不便但需要我至少有10个信誉才能发布图片或超过2个链接。

Sorry for this inconvenience but it requires me to have at least 10 reputation to post images or more than 2 links.

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

Item Limit: [http://upanh.biz/images/2014/03/27/itemlimit.png]

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

When scrolling down to the Bottom: http://upanh.biz/images/2014/03/27/bottom.png

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

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

The problem: I do not know the way how to append 10 more rows when scrolling down to the Bottom of the page without re-loading this (the Item Limit can be modified to 100 items per page).

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

Summary: Page loads 30 rows -> scroll down to the Bottom -> display 40 rows

Javascript 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循环。

If you want to display next 10 rows data from your database, then use the ajax() of jquery instead of for loop.

这篇关于使用Javascript滚动到底部时如何附加更多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！