Question

我正在努力构建一个无限滚动表，其中填充了json-server创建的fakejs用户名，电子邮件和地址数据。我希望每页显示50个数据点，然后当向下滚动到页面末尾时，将加载另外50个数据点。我怎样才能做到这一点？我看到我的代码到目前为止没有工作，因为当我向下滚动时，它没有加载另一批数据......

$(document).ready(function() {
  var currentPageNumber = 1;
  loadData(currentPageNumber);
  if($(window).scrollTop() == $(document).height() -           $(window).height()){  
      currentPageNumber +=1;
    loadData(currentPageNumber);
    }
});
function loadData(currentPage){
  $.ajax({
      method: "get",
      url: "http://localhost:3000/users?_page="+currentPage +"&_limit=50",
      dataType: 'json',
      success: function(data) {
              for(var i=0;i<data.length;i++) {
                 $('#tbl tbody').append("<tr><td>"+ data[i].name+"</td><td>"+ 
                 data[i].email+"</td><td>" 
                 + data[i].city + "," + data[i].country+ "</td></tr>")
              }; 


      },
      error: function(data) {
              console.log("Something went wrong!");
      }
})
}

table {width:100%; border-collapse: collapse; }
td, th { border: 1px solid black; }
tr { background: #ccc; }
tr:nth-child(odd) { background: #eee; }
td > div { white-space: pre; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Infinite Scrolling</h1>

<table id="tbl">
  <thead>
    <tr>
      <td>Name</td>
      <td>Email Address</td>
      <td>Physical Address</td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Answer 1

您可以根据沮丧和限制限制数据库中的数据选择。看看Retrieving data from inner join using LIMIT and OFFSET

第一次调用loadData(currentPageNumber);后发生loadData(currentPageNumber);到scroll()事件，以便首次加载时加载数据，并在用户滚动到结尾时调用loadData(currentPageNumber);页。

$(document).ready(function() {
    var currentPageNumber = 1;
    loadData(currentPageNumber);
    
    
                    $(window).on("scroll", function () {
                        var scrollHeight = $(document).height();
                        var scrollPosition = $(window).height() + $(window).scrollTop();
                        if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
                        currentPageNumber +=1;
                        	loadData(currentPageNumber);
                        }
                    });
    
    function loadData(currentPage){
        $.ajax({
            method: "get",
            url: "http://localhost:3000/users?_page="+currentPage,
            dataType: 'json',
            success: function(data) {
                    for(var i=0;i<data.length;i++) {
                       $('#tbl tbody').append("<tr><td>"+ data[i].name+"</td><td>"+ 
                       data[i].email+"</td><td>" 
                       + data[i].city + "," + data[i].country+ "</td></tr>")
                    }; 


            },
            error: function(data) {
                    console.log("Something went wrong!");
            }
    })
    }

})


<head>
    <title>Infinite Scroll Table</title>
    <style>

        table { border-collapse: collapse; }
        td, th { border: 1px solid black; }
        tr { background: #ccc; }
        tr:nth-child(odd) { background: #eee; }
        td > div { white-space: pre; }
    </style>

</head>
<body>
        <h1>Infinite Scrolling</h1>

        <table id="tbl">
                <thead>
                    <tr>

                                <td>Name</td>
                                <td>Email Address</td>
                                <td>Physical Address</td>


                    </tr>
                </thead>
                <tbody></tbody>
        </table>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="table.js"></script>         
</body>

Answer 2

您的代码仅在加载文档时检查一次。每次滚动时都必须检查并加载数据，因此应将其绑定到滚动事件。

$(document).ready(function() {
    var currentPageNumber = 1;
    loadData(currentPageNumber);
    $(document).on("scroll", function() {
         if($(window).height() + $(window).scrollTop() > $('body').height() - $(window).height() / 2){
             currentPageNumber +=1;
             loadData(currentPageNumber);
         }
    }
    //your loadData function
 })

Answer 3

它不会运行，因为您只调用一次检查位置。要使其运行，您应该跟踪鼠标的滚动事件，例如：

    $(document).ready(function() {
      var currentPageNumber = 1;
      loadData(currentPageNumber);
      $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() ==  $(document).height()) {
          loadData(currentPageNumber);
        }
      });

     function loadData(currentPage){
        console.log("test");
      }

   })

如何修复无限滚动表？

3 个答案: