Change jquery datatables default row count shown
Asked Answered
K

3

30

By default, datatables has 4 sizes of records to show: 10,25,50,100.

A) Is there a way to change this? I tried editing the jquery file to change the array to [30,60,90,120] itself and this destroyed it.

B) Is there a way to set the default selection size say to 50 (instead of 10) of this selector upon initializing when jquery builds it?

I can't find either of these items in the documentation.

Koreykorff answered 14/2, 2012 at 15:43 Comment(0)
K
69

[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:

lengthMenu
pageLength

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

Kalle answered 14/2, 2012 at 19:56 Comment(2)
Is there any event fired, when the user selects another length?Gladdy
Here are the events that are fired with the current version of datatables: datatables.net/reference/eventKalle
G
3
  • 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.

Greysun answered 18/10, 2015 at 20:19 Comment(0)
H
0

Datatable Version : 1.9.4 What 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.

Headache answered 8/5, 2019 at 3:31 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.