零配置jQuery Datatable默认分页不适用于大表

时间:2018-02-28 18:56:17

标签: jquery datatables

警告:

我知道我应该做服务器端分页,ajax加载等等。这是另一天。

问题:

我有一个简单的(静态的,硬编码的)表,有3列和大约5000行。我使用零配置将Datatable应用于它。分页不起作用。它显示了显示10行,同时实际显示了所有内容。

enter image description here

HTML:

<table width="100%" align="center" border="0" id="listtable" class="data-table table table-striped table-bordered table-hover table-condensed ">
   <thead>
      <tr>
         <th>Employee</th>
         <th>Email</th>
         <th>Status</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td> <a href="aaaaaa" class="txt-reallyred"> xxxxxxx </a> </td>
         <td>yyyyyyyy</td>
         <td>zzzzzzzzz</td>
      </tr>
      <tr>
         <td> <a href="aaaaaa" class="txt-reallyred"> xxxxxxx </a> </td>
         <td>yyyyyyyy</td>
         <td>zzzzzzzzz</td>
      </tr>
 ... repeat about 5000 times
   </tbody>
</table>

JS:

$("#listtable").DataTable();

JSFiddle有问题(等待大约5-6秒的数据表启动):

https://jsfiddle.net/d06ju3an/1/

1 个答案:

答案 0 :(得分:1)

查看HTML,关闭并打开tbody标记两次。

[...] <td>zzzzzzzzz</td> </tr> </tbody> <tbody> <tr> <td> [...]

如果您使用过滤器输入,则会看到DataTables有效,但只能在第一个tbody标记中使用。

JSFIDDLE