如何修改DataTable分页大小 自定义分页选项为15、30、50、全部

你只需要在DataTable初始化配置对象中新增lengthMenu属性即可实现需求，原有页脚列搜索的逻辑无需任何修改。

• lengthMenu接收二维数组格式参数：第一个子数组存储分页实际生效的条目数值，第二个子数组存储下拉选择框对外展示的文案
• 「全部」选项对应的数值传-1即可，DataTable默认将-1识别为关闭分页、展示全量数据

修改后的完整可运行代码如下：

<script type="text/javascript">
  $(document).ready(function() {
    // 为页脚每个单元格添加搜索输入框
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="'+title+'" />' );
    } );

    // 初始化DataTable实例
    var table = $('#example').DataTable({
        // 自定义分页长度选项：15/30/50/全部
        lengthMenu: [
            [15, 30, 50, -1],
            [15, 30, 50, '全部']
        ],
        initComplete: function () {
            // 绑定列搜索事件
            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>

补充说明：如果添加配置后页面没有出现分页长度选择下拉框，可以在配置中额外添加lengthChange: true显式开启长度切换功能，新版本DataTable该功能默认开启。

内容的提问来源于stack exchange，提问作者Michael Ritung