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>