【问题标题】:Change the default number of rows to display on one "page"更改默认行数以显示在一个“页面”上
【发布时间】:2013-11-26 18:31:11
【问题描述】:

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

【问题讨论】:

    标签: 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); } } });
        猜你喜欢
        • 1970-01-01
        • 2014-09-02
        • 2010-11-27
        • 1970-01-01
        • 1970-01-01
        • 2021-05-06
        • 2016-01-03
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多