When setting pageLength
property in DataTables
, the data is divided into multiple pages.
However, when DataTables.scroller
plugin is applied, the pageLength
setting is ignored and all data is displayed on one page.
How can I enable the pageLength
setting while applying the scroller
plugin?
[Version info]
DataTables: 1.13.1
Scroller: 2.0.7
Its possible to combine pagination and scroller :
by adding this options:
scrollY: '200px', // to enable vertical scrolling.
paging: true, // is to enable or disable table pagination. (default true)
$(document).ready(function () { $('#example').DataTable( { lengthMenu: [ [5, 10, 25, 50, -1], [5, 10, 25, 50, 'All'], ], pageLength: 10, scrollY: '200px', paging: true } ); });
<link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/scroller/2.0.7/js/dataTables.scroller.min.js"></script> <body> <table id="example"> <thead> <tr> <th>A</th> <th>B</th> <th>X</th> <th>Y</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> <td>1</td> <td>13</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>23</td> </tr> <tr> <td>16.5454</td> <td>16.5454</td> <td>15</td> <td>3</td> </tr> <tr> <td>1</td> <td>15</td> <td>16.5454</td> <td>3</td> </tr> <tr> <td>1</td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>316.5454</td> <td>1</td> <td>3</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>3</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>3</td> </tr> <tr> <td>16.5454</td> <td>16.5454</td> <td>15</td> <td>7</td> </tr> <tr> <td>1</td> <td>15</td> <td>16.5454</td> <td>3</td> </tr> <tr> <td>1</td> <td>1</td> <td>2</td> <td>10</td> </tr> <tr> <td>1</td> <td>316.5454</td> <td>1</td> <td>3</td> </tr> <tr> <td>1</td> <td>316.5454</td> <td>1</td> <td>3</td> </tr> <tr> <td>1</td> <td>316.5454</td> <td>1</td> <td>3</td> </tr> <tr> <td>1</td> <td>316.5454</td> <td>1</td> <td>3</td> </tr> <tr> <td>1</td> <td>316.5454</td> <td>1</td> <td>3</td> </tr> </tbody> </table> </body>
As answered above, pagination and scroller can be combined without any complex settings.
After some investigation, I found what was happening to my environment.
In my system, DataTable has to hide the lengthChange
select box.
Until the scroller plugin was applied, the pageLength
setting had been reflected in the DataTable as expected.
However, when I applied scroller , the DataTable became to show all records instead of the count set as pageLength
value.
I didn't realize the pageLength
settings were reset because the lengthChange
select box is hidden.
(For the investigation purpose, I created the simplified DataTable, but I could not find the 'trap' of the scroller specification, then I still suspected it was the restriction of the plugin.)
Now I understand the pageLength
setting will be just ignored when scroller
is true
.
If pageLength
and scroller
is used together, the pageLength
value is just needed to set programmatically.
That's simple.
[FYI] Simplified code is shown below:
The behavior can be checked by switching the scroller
setting to true or false .
<html>
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/scroller/2.0.7/js/dataTables.scroller.min.js"></script>
<script>
$(() => {
$('table').DataTable({
columns: [
{ data: 'id' },
{ data: 'name' }
],
pageLength: 5,
// This option was the cause of the problem.
lengthChange: false,
// If 'scroller' option is set as 'true', the 'pageLength' setting is ignored.
scroller: true
});
});
</script>
</head>
<body>
<table>
<thead>
<tr><th>id</th><th>name</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Airi Satou</td></tr>
<tr><td>2</td><td>Angelica Ramos</td></tr>
<tr><td>3</td><td>Ashton Cox</td></tr>
<tr><td>4</td><td>Bradley Greer</td></tr>
<tr><td>5</td><td>Brenden Wagner</td></tr>
<tr><td>6</td><td>Brielle Williamson</td></tr>
<tr><td>7</td><td>Bruno Nash</td></tr>
<tr><td>8</td><td>Caesar Vance</td></tr>
<tr><td>9</td><td>Cara Stevens</td></tr>
<tr><td>10</td><td>Cedric Kelly</td></tr>
<tr><td>11</td><td>Charde Marshall</td></tr>
<tr><td>12</td><td>Colleen Hurst</td></tr>
</tbody>
</table>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.