DataTables分页选项定制概述
DataTables是一个功能强大的jQuery表格插件，提供了丰富的数据展示和交互功能，其中分页是其核心特性之一。默认情况下，DataTables会提供一组预设的每页显示条目数选项（例如10, 25, 50, 100），但很多时候，开发者需要根据实际业务需求或用户偏好来定制这些选项。例如，将默认值更改为15, 30, 50，并增加一个“所有”条目的选项。
核心配置：lengthMenu 参数
在DataTables中，控制每页显示条目数选项的配置项是lengthMenu。通过在初始化DataTables时设置此参数，您可以完全自定义下拉菜单中显示的条目数选项。
lengthMenu 参数可以接受两种形式的值：
- 简单的数组： [ 10, 25, 50, -1 ]。在这种情况下，下拉菜单中将显示这些数字，-1 会自动转换为“All”（或根据DataTables语言包转换为“所有”）。
- 嵌套数组： [ [10, 25, 50, -1], ['10', '25', '50', '所有'] ]。第一个内部数组包含实际的数值（[-1] 表示所有条目），第二个内部数组包含这些数值对应的显示文本。这种形式允许您为每个选项提供自定义的显示名称。
为了实现将选项设置为 15, 30, 50, all 的需求，我们将采用第二种嵌套数组的形式，以便明确指定“所有”的显示文本。
实现步骤与示例代码
假设您已经有一个使用DataTables的HTML表格，并且已经包含了基本的初始化代码和页脚搜索功能，如下所示：
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<!-- Table data goes here -->
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<!-- More rows -->
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script type="text/javascript">
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="搜索 '+title+'" />' );
} );
// DataTable 初始化
var table = $('#example').DataTable({
// 在这里添加 lengthMenu 配置
"lengthMenu": [ [15, 30, 50, -1], [15, 30, 50, "所有"] ],
initComplete: function () {
// Apply the search
this.api().columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
}
});
} );
</script>在上面的代码中，关键的改动是DataTables初始化配置对象中新增的"lengthMenu"参数：
"lengthMenu": [ [15, 30, 50, -1], [15, 30, 50, "所有"] ]
- 第一个内部数组 [15, 30, 50, -1] 定义了实际的每页条目数值。其中，-1 是DataTables的一个特殊值，表示显示所有条目。
- 第二个内部数组 [15, 30, 50, "所有"] 定义了这些数值在下拉菜单中显示的文本。这里我们将 -1 对应的显示文本设置为“所有”。
通过这种配置，当用户与DataTables的分页控件交互时，他们将在每页显示条目数的下拉菜单中看到“15”、“30”、“50”和“所有”这些选项。
注意事项
- 参数位置： lengthMenu 选项应作为DataTables初始化配置对象的一个属性，与initComplete等其他选项并列。
- -1 的使用： 始终使用 -1 作为表示“所有”条目的数值，DataTables会自动处理其内部逻辑。
- 显示文本： 如果您想自定义“所有”的显示文本（例如从“All”改为“所有”或“全部”），务必使用嵌套数组的形式，并在第二个数组中提供相应的文本。
- 默认选中项： lengthMenu 仅定义了可选的条目列表。如果您想设置表格初始化时默认每页显示多少条，还需要配合使用 pageLength 参数，例如 "pageLength": 30。
- 与其他选项的兼容性： lengthMenu 与DataTables的其他分页、搜索、排序等功能完全兼容，不会产生冲突。
总结
自定义DataTables的分页选项是提升用户体验和满足特定业务需求的重要一环。通过灵活运用lengthMenu参数，您可以轻松地将每页显示条目数调整为任何期望的值，包括添加“所有”条目的选项。这不仅使表格数据展示更加灵活，也让用户能够根据自己的偏好更高效地浏览数据。记住，正确的参数结构和对 -1 特殊值的理解是成功实现定制的关键。
