Javascript 由于记录量巨大，网页加载滞后很多
HTML:Javascript 由于记录量巨大，网页加载滞后很多,javascript,jquery,html,node.js,pagination,Javascript,Jquery,Html,Node.js,Pagination,HTML: <div id="table-wrapper"> <div id="table-scroll"> <div id="loading"></div> <table id="results" class="hidden" cellspacing=10px> <thead> <tr class = "spacing">
<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>
$(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)}
});
});
索引号
山姆ID
项目说明
类型
库存状况
发出数量
期初数量
期末数量
损坏数量
约会
注明日期
评论
NTA SAM参考号。
<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>
$(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)}
});
});
$（文档）.ajaxStart（函数（）{
$（“#加载”）.show（）；
});
$（文档）.ajaxComplete（函数（）{
$（“#加载”）.hide（）；
});
$（“.navbar搜索”）.one（'click'，function（）{
$.ajax({
url:“http://localhost:3000/api/queryAllRecord“，//服务器url
键入：“POST”、//POST或GET
contentType:“应用程序/json”，
//要以ajax格式或querystring格式发送的数据
数据类型：“JSON”，
成功：功能（响应）{
如果（答复）{
var len=响应长度；
var txt=“”；
如果（len>0）{
对于（var i=0；i分页，您说过，尝试一次加载较少的数据量。无论如何，您不能一次在浏览器中显示13000条记录。我通常一次只加载可以在浏览器中显示的数据。希望有帮助
关于分页，您是对的。这似乎是减少加载时间和保持页面长度短的合乎逻辑的做法
在向下滚动页面并继续打印新条目时，可以使用限制和偏移请求数据
您可以一次请求条目，但您可以绘制有限的条目，并在向下滚动时绘制下一组。这种方式可以轻松地呈现数据，并且不会在页面和加载时间上增加很多负载
对于这种情况，我强烈推荐
Datatables允许您完全按照此处的要求进行操作，另外还有实现分页和一些其他有用的实用程序
具体来说，Datatables的功能可以帮助您解决此问题。本质上，它允许您查询非常大的数据集（从存储数据的位置），但一次只能将其中可管理的部分加载到DOM中；同样，它可以自动为您处理加载/卸载和分页设置
这是一个很好的教程，介绍了如何在PHP后端脚本中使用此功能