Question

我有一张表格列出了客户之前购买的商品。当客户仅购买我们的200-300件物品时，以下代码效果很好。但是，如果经销商每周从我们这里购买超过5,000件物品，那就变得非常麻烦了。有没有办法在需要时将更多行加载到表格的底部？将10,000条记录提取并加载到表中的速度非常慢。一个理想的解决方案是最初获取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>');
            }

非常感谢任何建议。

Answer 1

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

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

这可以帮助您了解用户何时接近页面的按钮。

您的后端应该能够分页，通过块检索数据因此，当用户到达页面底部时，您可以将结果附加到表中，从而发出AJAX请求。

这是一个如何实现的例子。

https://jsfiddle.net/eojdzc3o/

JQuery在Scroll上获得更多表行

1 个答案: