定制DataTables分页选项：修改每页显示条目数-html教程-PHP中文网

定制DataTables分页选项：修改每页显示条目数

DDD

发布： 2025-09-26 14:42:12

原创

382人浏览过

定制datatables分页选项：修改每页显示条目数

本教程详细介绍了如何在DataTables中自定义分页选项，即修改每页显示的条目数。通过配置lengthMenu参数，您可以将默认的条目列表（如10, 25, 50, 100）替换为任意自定义值，包括指定“所有”条目，从而提升用户体验和数据展示灵活性。

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表格，并且已经包含了基本的初始化代码和页脚搜索功能，如下所示：

图改改

在线修改图片文字

455

查看详情

<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 特殊值的理解是成功实现定制的关键。

以上就是定制DataTables分页选项：修改每页显示条目数的详细内容，更多请关注php中文网其它相关文章！