Change jquery datatables default row count shown Change jquery datatables default row count shown jquery jquery

Change jquery datatables default row count shown


[Update because this answer seems to get some views] --

Updated Answer:

In later versions (I believe 1.10+), the API naming conventions changed, ditching the Hungarian notation. I believe the old conventions are aliased for compatibility, but the current conventions are:

lengthMenupageLength

Thus, the updated answers are:

A) it's the lengthMenu parameter: https://datatables.net/reference/option/lengthMenu

For example, here's how I have one of mine set:

"lengthMenu": [[10, 25, 50, 100, 200, -1], [10, 25, 50, 100, 200, "All"]],

B) pageLength https://datatables.net/reference/option/pageLength -- optionally set this to whatever your default should be.

"pageLength" : 25,

Original Answer

A) It's the aLengthMenu parameter: http://datatables.net/ref#aLengthMenu

For example, here's how I have one of mine set:

"aLengthMenu": [[10, 25, 50, 100, 200, -1], [10, 25, 50, 100, 200, "All"]],

B) iDisplayLength -- set this parameter to whatever your default should be


  • DataTables 1.10+

    Use lengthMenu to define a list of available page lengths and optionally pageLength to set initial page length.

    If pageLength is not specified, it will be automatically set to the first value given in array specified by lengthMenu.

    var table = $('#example').DataTable({   lengthMenu: [ [2, 4, 8, -1], [2, 4, 8, "All"] ],   pageLength: 4});

    See this jsFiddle for code and demonstration.


  • DataTables 1.9

    Use aLengthMenu to define a list of available page lengths and iDisplayLength to set initial page length.

    var table = $('#example').dataTable({   "aLengthMenu": [ [2, 4, 8, -1], [2, 4, 8, "All"] ],   "iDisplayLength" : 4,        });

    See this jsFiddle for code and demonstration.


Datatable Version : 1.9.4What works for me is this:-First I searched the Jquery.dataTables file which is mostly placed in the js folder. Then I search for "aLengthMenu": [ 10, 25, 50, 100 ], and changed it according to my requirements i.e. "aLengthMenu": [ 50, 75, 100, 125 ]. Thereafter I searched for "iDisplayLength" and wherever its value is shown as 10 (4 to 5 places), I changed it to 50 and save. Dropdown on my index page started showing row option as 50,75,100,125 in place of 10,25,50,100 with default option selected as 50.