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

【问题标题】：JavaScript DataTables - pageLength is not working when applying scroller pluginJavaScript DataTables - pageLength 在应用滚动条插件时不起作用
【发布时间】：2023-01-30 12:14:56
【问题描述】：

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

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

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

【问题讨论】：

你能在这里分享一些代码吗？

标签： javascript jquery datatables scroller

【解决方案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>

【讨论】：

【解决方案2】：

正如上面的回答，分页和卷轴无需任何复杂设置即可组合。

经过一些调查，我发现我的环境发生了什么。
在我的系统中，数据表必须隐藏lengthChange 选择框。
直到卷轴插件已应用，pageLength设置已反映在数据表正如预期的那样。

然而，当我申请卷轴，这数据表变成显示所有记录而不是设置为pageLength值的计数。
我没有意识到 pageLength 设置已重置，因为 lengthChange 选择框被隐藏了。
（为了调查目的，我创建了简化的数据表，但我找不到卷轴规范，那我还是怀疑它是插件的限制。）

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

[仅供参考] 简化代码如下所示：
可以通过将 scroller 设置切换为来检查行为真的或者错误的.

<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>

【讨论】：