【发布时间】:2013-11-26 18:31:11
【问题描述】:
在使用 DataTables 的分页功能时,如何指定在单个“页面”上显示的行数?
【问题讨论】:
标签: datatables
在使用 DataTables 的分页功能时,如何指定在单个“页面”上显示的行数?
【问题讨论】:
标签: datatables
对于 DataTables 版本 1.10.5 和更新版本,如 blog post announcing the integration of HTML5 data-* attributes 中所述,可以通过源 (HTML) 表通过 data-page-length 指定每页显示的行数属性:
<table data-page-length='25'>
...
</table>
对于 DataTables 1.10 和更新版本,如 Reference > Options > pageLength 中所述,可以通过 pageLength 属性指定每页显示的行数:
$('#example').dataTable( {
"pageLength": 50
});
对于早于 1.10 版的 DataTables,如 DataTables > Usage > Options > iDisplayLength 中所述,可以通过 iDisplayLength 属性指定每页显示的行数:
$('#example').dataTable( {
"iDisplayLength": 50
});
我的两分钱:使用data-* 方法。它允许您构建一个 dataTable 调用(您可以在整个应用程序中使用),同时提供配置每个单独表的行为方式的选项:
<!-- table with embedded custom configurations -->
<table class="apply_dataTable" data-page-length='25'>
...
</table>
<!-- table with different embedded custom configurations -->
<table class="apply_dataTable" data-page-length='50' data-order='[[2, "desc"]]'>
...
</table>
<!-- one JavaScript call enhances both tables above -->
<script>
$('table.apply_dataTable').dataTable(); //one invocation of datatables treats each table they way it wants to be
</script>
【讨论】:
data-page-length='25' 工作不正常,data-page-size='25' 将工作。
使用 lengthMenu 也可能有所帮助:
$(document).ready(function() {
$('#example').DataTable( {
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
});
https://datatables.net/examples/advanced_init/length_menu.html
【讨论】:
10 条记录
$('#datatable').DataTable({"pageLength": 10});
50 条记录
$('#datatable').DataTable({"pageLength": 50});
所有记录
$('#datatable').DataTable({"pageLength": -1});
【讨论】:
使用 1.11 版 - 使用属性“数据显示”。
【讨论】:
我们可以使用jquery设置属性,并在一个通用文件中添加。
$('.dataTablegrid').attr('data-page-length',50);
这将适用于整个项目的所有数据表
【讨论】: