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

Question

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 条，并且会不断增加，所以我需要一种方法让它加载得更快，并且不会出现滞后等问题。我发现分页可能是让它加载更快的一种方式，但不确定这是否是正确的解决方案到这个问题。我尝试了简单的 pagination.js 插件，但不确定分页占位符的含义。

有没有其他方法可以让网页在未来加载 14000 条甚至更多记录时也不会卡顿？

是否有任何其他分页插件有更清晰的示例说明如何将插件实现到 js 代码和 html 中，因为我对分页比较陌生，不明白它是如何工作的。

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

Answer 1

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

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

具体来说，可以帮助您解决此问题的 Datatables 功能是 Server Side Processing 选项。本质上，它允许您查询一个非常大的数据集（从您的数据存储的任何地方），但一次只能将可管理的部分加载到 DOM 中；再次自动为您处理加载/卸载和分页设置。

一个很好的教程，解释了如何通过 PHP 后端脚本使用这个功能can be found here

Answer 2

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

Answer 3

1. 您对分页的看法是正确的。这似乎是减少加载时间和保持页面长度较短的合乎逻辑的做法。

2. 您可以在向下滚动页面并继续绘制新条目时使用限制和偏移来请求数据。

3. 您可以一次请求这些条目，但您可以绘制其中的一部分，并在向下滚动时绘制下一组。这种方式数据的呈现将很容易，并且不会在页面和加载时间上增加很多负载。