CODEWITHSUNDEEP
datatables
Jeromy French
Jeromy French

Reputation: 12121

Change the default number of rows to display on one "page"

How can I specify the number of rows to display on a single "page" when using DataTables's pagination feature?

Upvotes: 42

Views: 129154

Answers (7)

Amandeep
Amandeep

Reputation: 1

$('#tableID').DataTable( {
"pageLength": 5 });

Upvotes: -1

MATTA RAHUL
MATTA RAHUL

Reputation: 1

You Can Write below code in your J-query of Data-Table

pageLength: 50,

Upvotes: -1

Jeromy French
Jeromy French

Reputation: 12121

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>

Upvotes: 92

codemirror
codemirror

Reputation: 3572

for 10 records 

$('#datatable').DataTable({"pageLength": 10});

for 50 records

$('#datatable').DataTable({"pageLength": 50});

for all records

$('#datatable').DataTable({"pageLength": -1});

Upvotes: 1

Thiru
Thiru

Reputation: 37

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

Upvotes: 0

ahale
ahale

Reputation: 9

using version 1.11 - use the attribute 'data-show'.

Upvotes: 0

rainy
rainy

Reputation: 1587

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

Upvotes: 26

Related Questions