由于记录量大，网页加载滞后很多

HTML：

<div id="table-wrapper"> 
<div id="table-scroll">
<div id="loading"></div>
<table id="results" class="hidden" cellspacing=10px>
<thead>
<tr class = "spacing">
<th class='headers'>Index No</th>
<th class='headers'>SAM ID</th>
<th class='headers'>Item Description</th>
<th class='headers'>Type</th>
<th class='headers'>Inventory Status</th>
<th class='headers'>Issued QTY</th>
<th class='headers'>Opening QTY</th>
<th class='headers'>Closing QTY</th>
<th class='headers'>Corrupted QTY</th>
<th class='headers'>Date In</th>
<th class='headers'>Date Out</th>
<th class='headers'>Remarks</th>
<th class='headers'>NTA SAM Reference No.</th>
</tr>
</thead>
<tbody id="bResults"></tbody>
</table>
</div>
</div>

.JS：

$(document).ajaxStart(function() {
$("#loading").show();
});
$(document).ajaxComplete(function() {
$("#loading").hide();
});
$(".navbar-search").one('click', function(){
$.ajax({
url: "http://localhost:3000/api/queryAllRecord", // server url
type: "POST", //POST or GET
contentType: "application/json",
// data to send in ajax format or querystring format
dataType : "JSON", 
success: function(response) {
if(response){
var len = response.length;
var txt = "";
if(len > 0){
for(var i=0;i<len;i++){
if(response[i].samID){
txt += "<tr class='rowdata'>"+"<td 
class='editNumber'></td>"
+"<td class='searchSam 
editNumber'>"+response[i].samID+"</td>"
+"<td class='editNumber'>"
+response[i].itemDescription +"</td>"
+"<td class='editNumber'>"
+response[i].Type+"</td>"
+"<td class='editNumber'>"
+response[i].InventoryStatus
+"</td>"+"<td class='editNumber'>"
+response[i].issuedQTY + "</td>"
+"<td class='editNumber'>"
+response[i].openingQTY + "</td>"
+"<td class='editNumber'>" 
+response[i].closingQTY+"</td>"
+"<td class='editNumber'>"
+response[i].corruptedQTY+"</td>"
+"<td class='editNumber'>"
+response[i].dateIn+"</td>"
+"<td class='editNumber'>"
+response[i].dateOut+"</td>"
+"<td class='editNumber'>"
+response[i].Remarks+"</td>"
+"<td class='searchNta editNumber'>"
+response[i].ntaRequestRef+"</td>"
+"<td><button class='input button-edit' 
type='submit' id='edit' 
onclick = 'edit(this)'>Edit</button></td>" 
+"<td><input class='input button-delete' 
type='button' id='delete' value='Delete' 
onclick='deleteResult(this)' /></td>"+"
</tr>";
}
}
$("#bResults").empty();
if(txt != ""){
$("#results").removeClass("hidden");
$("#bResults").append(txt);
}
}
}
},
error: function(response) {
alert('error');
}
});
event.preventDefault();
});
function test(pageNumber)
{
var page="#page-id-"+pageNumber;
$('.select').hide()
$(page).show()
}
$(function() {
$('#nice').pagination({
items: 14000,
itemsOnPage: 100,
cssStyle: 'light-theme',
onPageClick: function(pageNumber){test(pageNumber)}
});
});

基本上，我的 ajax 会用大量的记录来响应，然后这些记录将显示在表中。记录在 13000 左右，并且会不断增加，所以我需要一种方法来使其加载更快并且不会出现滞后等问题。我发现分页是一种可能使其加载速度更快的方法，但不确定这是否是解决此问题的正确解决方案。我尝试了简单的分页.js插件，但不确定分页占位符的含义。

有没有其他方法可以使网页即使在将来加载 14000 条记录或更多时也不会滞后？

是否有任何其他分页插件在如何将插件实现到 js 代码和 html 中有更清晰的例子，因为我对分页很陌生，不了解它是如何工作的。

我正在节点上运行它.js并从mongodb检索数据。我知道是我的 13000++ 记录使网页加载缓慢，但我需要 13000++ 记录以页面或整体显示，因为我也在 html 表上进行实时搜索，所以如果有人有任何建议让网页表现得更好，除了缩小，请随时在评论或答案中提出建议。提前感谢！

对于这种情况，我强烈推荐JQuery Datatables。

数据表可让您完全执行此处尝试执行的操作，并具有实现分页和一些其他有用的实用程序的额外优势。

具体而言，可帮助您解决此问题的数据表功能是服务器端处理选项。从本质上讲，它允许您查询非常大的数据集(从存储数据的任何位置(，但一次只将其可管理的部分加载到 DOM 中;同样，自动为您处理加载/卸载和分页设置。

可以在此处找到一个很棒的教程，解释如何将此功能与 PHP 后端脚本一起使用

分页，你说过，尝试一次加载少量数据。无论如何，您都无法一次在浏览器中显示 13000 条记录。我通常一次只加载可以在浏览器中显示的数据。希望对您有所帮助。

你对分页的看法是对的。这似乎是减少加载时间和保持页面长度短的合乎逻辑的事情。
您可以在向下滚动页面并继续绘制新条目时使用限制和偏移来请求数据。
一次请求条目，但您可以绘制有限的条目，当您向下滚动时，您可以绘制下一组。这样，数据的呈现将很容易，并且不会给页面和加载时间带来大量负载。

相关内容

最新更新

热门标签：