CODEWITHSUNDEEP
javascriptjquerydatatablesscroller
Shin
Shin

Reputation: 21

JavaScript DataTables - pageLength is not working when applying scroller plugin

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

Upvotes: 0

Views: 1476

Answers (2)

Shin
Shin

Reputation: 21

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.
Until the scroller plugin was applied, the pageLength setting had been reflected in the DataTable as expected.

However, when I applied scroller, the DataTable became to show all records instead of the count set as pageLength value.
I didn't realize the pageLength settings were reset because the lengthChange select box is hidden.
(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.)

Now I understand the pageLength setting will be just ignored when scroller is true.
If pageLength and scroller is used together, the pageLength value is just needed to set programmatically.
That's simple.

[FYI] Simplified code is shown below:
The behavior can be checked by switching the scroller setting to true or 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>

Upvotes: 0

SelVazi
SelVazi

Reputation: 16033

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>

Upvotes: 0

Related Questions