JavaScript DataTables - pageLength 在应用滚动条插件时不起作用
[英]JavaScript DataTables - pageLength is not working when applying scroller plugin
问题描述
When setting pageLength property in DataTables , the data is divided into multiple pages.
在DataTables中设置pageLength属性时，数据被分成多页。
However, when DataTables.scroller plugin is applied, the pageLength setting is ignored and all data is displayed on one page.但是，当应用DataTables.scroller插件时， pageLength设置将被忽略，所有数据都显示在一页上。
How can I enable the pageLength setting while applying the scroller plugin?如何在应用scroller条插件时启用pageLength设置？
[Version info] [版本信息]
DataTables: 1.13.1数据表：1.13.1
Scroller: 2.0.7滚动条：2.0.7
2 个解决方案
解决方案1
0 2023-01-26 10:21:40
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>
解决方案2
0 2023-01-30 04:14:56
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.在我的系统中， DataTable必须隐藏lengthChange select 框。
Until the scroller plugin was applied, the pageLength setting had been reflected in the DataTable as expected.在应用scroller插件之前， pageLength设置已按预期反映在DataTable中。
However, when I applied scroller , the DataTable became to show all records instead of the count set as pageLength value.但是，当我应用scroller时， DataTable变成显示所有记录而不是设置为pageLength值的计数。
I didn't realize the pageLength settings were reset because the lengthChange select box is hidden.我没有意识到pageLength设置已重置，因为lengthChange select 框被隐藏了。
(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.) （为了调查，我创建了简化的DataTable，但是我找不到scroller规范的“陷阱”，所以我仍然怀疑是插件的限制。）
Now I understand the pageLength setting will be just ignored when scroller is true .现在我明白pageLength设置将在scroller为true时被忽略。
If pageLength and scroller is used together, the pageLength value is just needed to set programmatically.如果pageLength和scroller一起使用，只需要以编程方式设置pageLength值。
That's simple.很简单。
[FYI] Simplified code is shown below: [仅供参考] 简化代码如下所示：
The behavior can be checked by switching the scroller setting to true or false .可以通过将scroller条设置切换为true或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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.