更改默认行数以显示在一个“页面”上

Posted 2023-05-07

【中文标题】更改默认行数以显示在一个“页面”上

【英文标题】：Change the default number of rows to display on one "page"

【发布时间】：2013-11-26 18:31:11

【问题描述】：

在使用 DataTables 的分页功能时，如何指定在单个“页面”上显示的行数？

【参考方案1】：

对于 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' 将工作。

【参考方案2】：

使用 lengthMenu 也可能有所帮助：

$(document).ready(function() 
$('#example').DataTable( 
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
 );

);

https://datatables.net/examples/advanced_init/length_menu.html

【讨论】：

虽然这很有帮助，但它并不能回答问题。问题不是如何修改下拉菜单中可用的默认值集，而是如何在该下拉菜单中指定选定的值。

如果您要指定的长度不是默认的 lengthMenu 条目之一，这是最好的答案。否则，lengthMenu 显示为空白。 （如果您不想使用第一个 lengthMenu 值作为默认值，您仍然需要指定 pageLength）

【参考方案3】：

10 条记录

$('#datatable').DataTable("pageLength": 10);

50 条记录

$('#datatable').DataTable("pageLength": 50);

所有记录

$('#datatable').DataTable("pageLength": -1);

【参考方案4】：

使用 1.11 版 - 使用属性“数据显示”。

【参考方案5】：

我们可以使用jquery设置属性，并在一个通用文件中添加。

$('.dataTablegrid').attr('data-page-length',50);

这将适用于整个项目的所有数据表

【讨论】：

oTable = $('#datatable').DataTable( "preDrawCallback": function( settings ) var api = this.api(); if(settings._iDisplayLength!="50") var len = api.page.len(50); );