如何修复无限滚动表？
[英]How do I fix my infinite scroll table?
问题描述
I am working to build an infinite scroll table populated with fakejs users' name, email and address data created by json-server. 
我正在构建一个无限滚动表，其中填充了由json-server创建的fakejs用户的名称，电子邮件和地址数据。 I want to display 50 data points per page, and then when scrolling down to the end of the page, another 50 data points would load. 我想每页显示50个数据点，然后向下滚动到页面末尾时，将加载另外50个数据点。 How can I achieve that? 我该如何实现？ I see that my code is not working so far because when I scroll down, its not loading another batch of data ... 我看到我的代码到目前为止无法正常工作，因为当我向下滚动时，它不会加载另一批数据...
$(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>
3 个解决方案
解决方案1
1 2018-02-07 04:20:56
You can limit data selection from database based on upset and limit. 您可以基于限制和限制来限制从数据库中选择数据。 Have a look to Retrieving data from inner join using LIMIT and OFFSET 看一下使用LIMIT和OFFSET从内部联接中检索数据
And loadData(currentPageNumber); 和loadData(currentPageNumber); to scroll() event after the first call to loadData(currentPageNumber); 在第一次调用loadData(currentPageNumber);之后scroll()到scroll()事件loadData(currentPageNumber); so that your data loads on first load and call loadData(currentPageNumber); 这样您的数据就会在第一次加载时加载并调用loadData(currentPageNumber); when the user scroll to the end of the page. 当用户滚动到页面末尾时。
$(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>
解决方案2
0 2018-02-07 04:16:38
Your code only check 1 time when the document loaded. 加载文档时，您的代码仅检查1次。 You have to check and load data everytime you scroll so you should bind it to scroll event. 每次滚动时都必须检查并加载数据，因此应将其绑定到滚动事件。
$(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
})
解决方案3
0 2018-02-07 04:21:03
It does not run because you only call checking position only once time. 它不会运行，因为您只调用一次检查位置。 To make it run, you should tracking the mouse's scroll event, for ex: 为了使其运行，您应该跟踪鼠标的滚动事件，例如：
$(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");
}
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.