Jquery Datatable 未显示超过 500 个条目的记录答案

【问题标题】：Jquery Datatable is not showing the records beyond 500 entriesJquery Datatable 未显示超过 500 个条目的记录
【发布时间】：2016-10-26 16:38:24
【问题描述】：

我已经创建了一个表

<table id="test" class="table table-striped"></table>

现在我不想使用 ServerSide 处理。所以我制作了下面给出的这个客户端脚本

$.ajax({
          type: "POST",
          url:"http://URL/demo",
          data:{
            codeType : '10'
          },success:function(data1){
            var dt = [];
            $.each(data1,function(i,v) {
                dt.push([data1[i].id,data1[i].id1,data1[i].id2,data1[i].id3,data1[i].id4,data1[i].id5]);
            });
            var table = $('#test').DataTable({
            "data": dt,
            "bProcessing": true,
             "aoColumns": [
                {"title":"ID", visible:false},
                {"title":"ID1"},
                {"title":"ID2"},
                {"title":"ID3"},
                {"title":"ID4"},
                {"title":"ID5"}
            ]
            });
          }
      });

我可以在这个表中得到正确的数据。但我在数据库中有 14000 条记录，但此表仅显示 500 个条目。为什么？如何显示表格中的所有记录？

【问题讨论】：

在客户端处理 14000 条记录对于浏览器来说是很多工作，导致用户体验明显变慢。为什么不做服务器端呢？

标签： jquery mysql datatables

【解决方案1】：

一个大胆的猜测，你的$.each()循环在你初始化DataTable（？）时还没有完成使用promise来确保你只初始化when()循环完成：

$.when( 
  $.each(data1,function(i,v) {
    dt.push([data1[i].id,data1[i].id1,data1[i].id2,data1[i].id3,data1[i].id4,data1[i].id5]);
  })
).then(function() {
   table = $('#test').DataTable({
     "data": dt,
     "bProcessing": true,
     ...
   })
})

这将确保当且仅当 $.each 完成时才实例化 dataTable，无论是 1 行、14.000 行还是浏览器崩溃时都不会：)

【讨论】：