Javascript JQuery在滚动中获取更多表行

我有一张表，上面列出了顾客以前购买的物品。当客户只从我们这里购买了200-300件商品时，下面的代码非常有效。然而，当我们的经销商每周向我们购买超过5000件商品时，这就变得非常麻烦。有没有办法在需要时将更多行加载到表的底部？获取10000条记录并将其加载到表中的速度非常慢。理想的解决方案是最初获取30行并将其加载到表中，当屏幕上显示第4行到最后一行时，再获取30行。有什么想法吗？以下是我当前加载所有结果的代码：

JQuery:

   var data = JSON.parse(call.responseText);
            if(data[0] === 'none') { $('#purchaseHistory').html('<center><b>There is no purchase history to show.</b></center>'); return; }
            var purchases = data.length;
            $('#purchaseHistory').empty();
            for(i = 0; i < purchases; i++) {
                $('#purchaseHistory').append('<tr ondblclick="popup(\'order.php?order='+data[i]['ORDER']+'&cust='+CUSTOMER_ID+'\', \'Order #'+ data[i]['ORDER'] +'\', \'1150\', \'845\');"><td style="width: 60px;">'+ data[i]['ORDERNO'] +'</td><td style="width: 100px;">'+data[i]['ORDER_DATE'] +'</td><td style="width: 100px;">'+data[i]['PRODCODE']+'</td><td style="width: 170px;">'+ data[i]['ITEM'] +'</td><td style="width: 25px;">'+ data[i]['QUANTITY'] +'</td><td style="width: 120px;">'+ data[i]['STATUS'] +'</td><td style="width: 75px;">'+ data[i]['SHIP_DATE'] +'</td><td style="width: 60px;">---</td><td style="width: 70px;">'+ data[i]['AMOUNT'] +'</td><td style="width:85px;">---</td></tr>');
            }

var data=JSON.parse（call.responseText）；
if（data[0]==='none'）{$（'#purchaseHistory'）.html（'没有要显示的购买历史记录'）；return；}
var购买=data.length；
$（“#purchaseHistory”）.empty（）；
对于（i=0；i<1；i++）{
$（“#purchaseHistory”）。追加（“”+数据[i]['ORDERNO']+''+数据[i]['OrderU DATE']+'+数据[i]['PRODCODE']+'+数据[i]['ITEM']+'+数据[i]['QUANTITY']+'+数据[i]['STATUS']+'+''+数据[i]['SHIP\U DATE']+'+'-'-'+'-+'-'+数据[i]['AMOUNT'+'+'+'''+'-']；
}

---

非常感谢您的建议。

添加监听器以滚动到您的窗口：

$(window).scroll(function() {});

这有助于您了解用户何时接近页面底部

您的后端应该能够分页，按块检索数据，以便在用户到达页面底部发出AJAX请求时将结果追加到表中

这里有一个你将如何实现的例子

---

对于UI，请查找分页UI。有很多例子。您需要更改后端以接受偏移和限制参数。因此，您可以在数据库中查询所需的项目。当您请求下一页数据时，前端将告诉后端偏移量（页面*页面大小）和限制（页面大小）。