我正在努力构建一个无限滚动表，其中填充了由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>最佳答案
您可以根据扰乱和限制来限制数据库中的数据选择。 看看Retrieving data from inner join using LIMIT and OFFSET
和loadData(currentPageNumber);到scroll()第一次调用 loadData(currentPageNumber); 后发生事件，以便您的数据在第一次加载时加载，并在用户滚动到页面末尾时调用 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>关于javascript - 如何修复无限滚动表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48655765/