零配置jQuery Datatable默认分页不适用于大表
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了零配置jQuery Datatable默认分页不适用于大表相关的知识,希望对你有一定的参考价值。
警告:
我知道我应该做服务器端分页,ajax加载等等。那是另一天。
问题:
我有一个简单的(静态的,硬编码的)表,有3列和大约5000行。我使用零配置将Datatable
应用于它。分页不起作用。它显示显示10行,同时实际显示所有内容。
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秒的数据表启动):
答案
看看HTML,你关闭并打开两次tbody
标签。
[...] <td>zzzzzzzzz</td> </tr> </tbody> <tbody> <tr> <td> [...]
如果您使用过滤器输入,您将看到DataTables有效,但仅在第一个tbody
标记中。
以上是关于零配置jQuery Datatable默认分页不适用于大表的主要内容,如果未能解决你的问题,请参考以下文章