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