Search code examples
datatables

Change the default number of rows to display on one "page"


How can I specify the number of rows to display on a single "page" when using DataTables's pagination feature?


Solution

  • For DataTables version 1.10.5 and newer, as documented on the blog post announcing the integration of HTML5 data-* attributes, the number of rows to show per page can be specified via the source (HTML) table through the data-page-length attribute:

    <table data-page-length='25'>
         ...
    </table>
    

    For DataTables version 1.10 and newer, as documented at Reference > Options > pageLength, the number of rows to show per page can be specified via the pageLength attribute:

    $('#example').dataTable( {
        "pageLength": 50
    });
    

    For DataTables older than version 1.10, as documented at DataTables > Usage > Options > iDisplayLength, the number of rows to show per page can be specified via the iDisplayLength attribute:

    $('#example').dataTable( {
        "iDisplayLength": 50
    });
    

    My two cents: use the data-* approach. It allows you to construct one dataTable call (that you can use throughout your app) while providing the option to configure how each individual table behaves:

    <!-- 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>