How can I specify the number of rows to display on a single "page" when using DataTables's pagination feature?
6 Answers
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>
-
Now,
data-page-size='25'
will work ifdata-page-length='25'
is not working correctly. Nov 6, 2019 at 9:41
Using lengthMenu may help too:
$(document).ready(function() {
$('#example').DataTable( {
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );
https://datatables.net/examples/advanced_init/length_menu.html
-
2While this is helpful, it doesn't answer the question. The question was not how to modify the default set of values available in the drop down, but how to specify the selected value in that drop down. Jun 30, 2016 at 18:54
-
1This is the best answer if you are looking to specify a length that is not one of the default lengthMenu entrires. Otherwise the lengthMenu shows blank as selected. (You will still want to specify the pageLength if you do not want to use the first lengthMenu value as the default)– TolgaJan 21, 2019 at 6:05
for 10 records
$('#datatable').DataTable({"pageLength": 10});
for 50 records
$('#datatable').DataTable({"pageLength": 50});
for all records
$('#datatable').DataTable({"pageLength": -1});
We can set attribute using jquery and add up in a common file.
$('.dataTablegrid').attr('data-page-length',50);
This will apply for all the datatables across the project
-
oTable = $('#datatable').DataTable({ "preDrawCallback": function( settings ) { var api = this.api(); if(settings._iDisplayLength!="50") { var len = api.page.len(50); } } });– RameshDec 6, 2018 at 10:07