By default, jquery datatable shows 10 by default and has
options : 10,25,50,100
How can I change these options?
By default, jquery datatable shows 10 by default and has
options : 10,25,50,100
How can I change these options?
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
});
} );
$(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
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