JavaScript DataTables - pageLength 在应用滚动条插件时不起作用

Question

在DataTables中设置pageLength属性时，数据被分成多页。
但是，当应用DataTables.scroller插件时， pageLength设置将被忽略，所有数据都显示在一页上。

如何在应用scroller条插件时启用pageLength设置？

[版本信息]
数据表：1.13.1
滚动条：2.0.7

Answer 1

可以结合分页和滚动条：

通过添加此选项：

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>

Answer 2

正如上面的回答，分页和滚动条可以结合起来，不需要任何复杂的设置。

经过一些调查，我发现我的环境发生了什么。
在我的系统中， DataTable必须隐藏lengthChange select 框。
在应用scroller插件之前， pageLength设置已按预期反映在DataTable中。

但是，当我应用scroller时， DataTable变成显示所有记录而不是设置为pageLength值的计数。
我没有意识到pageLength设置已重置，因为lengthChange select 框被隐藏了。
（为了调查，我创建了简化的DataTable，但是我找不到scroller规范的“陷阱”，所以我仍然怀疑是插件的限制。）

现在我明白pageLength设置将在scroller为true时被忽略。
如果pageLength和scroller一起使用，只需要以编程方式设置pageLength值。
很简单。

[仅供参考] 简化代码如下所示：
可以通过将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>

JavaScript DataTables - pageLength 在应用滚动条插件时不起作用

问题描述

2 个解决方案

解决方案1
0 2023-01-26 10:21:40

解决方案2
0 2023-01-30 04:14:56

JavaScript DataTables - pageLength 在应用滚动条插件时不起作用

问题描述

2 个解决方案

解决方案1 0 2023-01-26 10:21:40

解决方案2 0 2023-01-30 04:14:56

解决方案1
0 2023-01-26 10:21:40

解决方案2
0 2023-01-30 04:14:56