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中，因为我对分页很新，并且不了解它是如何工作的。 < / p>

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

Answer 1

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

Answer 2

你的分页是正确的。这似乎是合乎逻辑的做法，可以减少加载时间并缩短页面长度。
当您向下滚动页面并继续绘制新条目时，您可以使用限制和抵消来请求数据。
您可以立即请求输入，但您可以绘制有限的条目，当您向下滚动时，您可以绘制下一组。这样，数据呈现就很容易，并且不会给页面和加载时间带来很大的负担。

Answer 3

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

Datatables让您可以完成您在此处尝试做的事情，并为您实现分页和一些其他有用的实用工具。

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

一个很好的教程，解释如何将此功能与PHP后端脚本can be found here

一起使用

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

3 个答案: