Change values of select box of “show 10 entries” of jquery datatable

By default, jquery datatable shows 10 by default and has

options : 10,25,50,100

How can I change these options?

8 Answers
8

Don't forget to change the iDisplayLength as well:

$(document).ready(function() {
$('#tbl_id').dataTable({
"aLengthMenu": [[25, 50, 75, -1], [25, 50, 75, "All"]],
"iDisplayLength": 25
});
} );


iDisplayLength

pageLength

lengthMenu

aLengthMenu

$(document).ready(function() {
$('#example').dataTable( {
"aLengthMenu": [[25, 50, 75, -1], [25, 50, 75, "All"]],
"pageLength": 25
} );
} );


aLengthMenu :
This parameter allows you to readily specify the entries in the length drop down menu that DataTables shows when pagination is enabled. It can be either a 1D array of options which will be used for both the displayed option and the value, or a 2D array which will use the array in the first position as the value, and the array in the second position as the displayed options (useful for language strings such as 'All').

Update

Since DataTables v1.10, the options you are looking for are pageLength and lengthMenu

pageLength

lengthMenu

In my case , aLengthMenu is not working. So i used this. And it is working.

jQuery('#dyntable3').dataTable({
oLanguage: {sLengthMenu: "<select>"+
"<option value='100'>100</option>"+
"<option value='200'>200</option>"+
"<option value='300'>300</option>"+
"<option value='-1'>All</option>"+
"</select>"},
"iDisplayLength": 100

});


Thank you

According to datatables.net the proper way to do this is adding the lengthMenu property with an array of values.

$(document).ready(function() {
$('#example').dataTable( {
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );


$('#tblSub1View').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bDestroy": true,
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0, 1]
}],
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"iDisplayLength": 10,
});


if you click some button，then change the datatables the displaylenght，you can try this ：

$('.something').click( function () {
var oSettings = oTable.fnSettings();
oSettings._iDisplayLength = 50;
oTable.fnDraw();
});

oTable = $('#example').dataTable();


If you want to use 'lengthMenu' together with buttons(copy, export), you have to use this option dom: 'lBfrtip'.
Here https://datatables.net/reference/option/dom you can find meaning of each symbol.
For example, if you will use like this 'Bfrtip', lengthMenu will not appears.

pageLength: 50,

worked for me Thanks

Versions for reference

jquery-3.3.1.js

/1.10.19/js/jquery.dataTables.min.js

/buttons/1.5.2/js/dataTables.buttons.min.js

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.