Integration of infinite scroll pagination using jquery data table (Server side rendering)

chiefnayeem

On scroll infinite pagination (Server side) - Works but getting extra container height with blank spaces
* We will get 40 results per api call request
* When scrolling bottom and reached the end, if we loaded more than 500 rows we should remove some data from the top
* When scrolling top and reached the top, if we loaded more than 500 rows we should remove some data from the bottom
* Should show the pagination numbers according to row index/serial
* We will have sorting on columns
* If we try to sort a column, we will be paginated at the first page, I mean reset the pagination
* The column header should be sticky

Here is the code snippet I tried.

```let start = 0; // Initialize the start value

    var table = $('.custome-table-style').DataTable({
        autoWidth: false,
        processing: true,
        serverSide: true,
        searching: true,
        fixedHeader: true,
        responsive: true,
        buttons: [
            {extend: 'colvis', text: "Select Columns", className: 'btn btn-default'}
        ],
        dom: 'lfrt<"table-footer-section d-flex justify-content-between align-items-center"iB>',
        ajax: {
            url: "{{ route('roles.pagination.lists') }}",
            type: "GET",
            data: function (data) {
                data.length = 40; // Number of rows to fetch in each request

                // Modify the request parameters for pagination
                if (data.draw === 1) {
                    // For the first draw request, start from 0
                    data.start = 0;
                } else {
                    // Adjust the start position based on draw and length parameters
                    data.start = (data.draw - 1) * data.length;
                }

                // Add filters to the request parameters
                data.filters = {
                    badge_layout_id: $("#badge_layout_id").val(),
                    client_settings_id: $("#client_settings_id").val()
                };
            },
            dataSrc: function (data) {
                // Map the returned data to the required format for DataTables
                return data.data; // Assuming the data is returned in a 'data' property
            }
        },

        columns: [
            {
                data: 'name',
                "render": function (data, type, row) {
                    return `<a href="/roles/${row.id}/edit"  title="Edit">${row.name}</a>`;
                },
                name: 'name'
            },
            {data: 'is_admin', name: 'is_admin'},
            {data: 'badge_layout', name: 'badge_layout'},
            {data: 'created_at', name: 'created_at'},
        ],
        scrollY: 400,
        scrollCollapse: true,
        scroller: {
            loadingIndicator: true,
            //displayBuffer: 20,
           // serverWait: 200,
           // boundaryScale: 0.5, // Adjust this value as needed
           // displayBoundary: 3 // Adjust this value as needed
        },
        deferRender: true,
        initComplete: function (settings, json) {
            const table = this.api();
            const tableContainer = $(".dataTables_scrollBody");
            const rowHeight = 48; // Assuming each row has a fixed height of 48 pixels
            const bufferSize = 3; // Number of rows to preload before reaching the scroll boundary

            let isScrolling = false;

            tableContainer.on('scroll', function () {
                if (isScrolling) {
                    return;
                }

                const scrollTop = tableContainer.scrollTop();
                const scrollHeight = tableContainer.prop('scrollHeight') || tableContainer.height();
                const clientHeight = tableContainer.prop('clientHeight') || tableContainer.height();

                if (scrollTop === 0) {
                    const start = Math.max(0, table.page.info().start - table.page.len());

                    if (start !== table.page.info().start) {
                        isScrolling = true;
                        table.page(start / table.page.len()).draw('page').done(function () {
                            isScrolling = false;
                        });
                    }
                } else if (scrollTop + clientHeight >= scrollHeight - clientHeight * bufferSize) {
                    const start = table.page.info().start + table.page.len();

                    if (start !== table.page.info().start) {
                        isScrolling = true;
                        table.page(start / table.page.len()).draw('page').done(function () {
                            isScrolling = false;
                        });
                    }
                }
            }); 

            table.columns.adjust().draw()
        }
    });```

allan

If you could link to a test page showing the issue, that would be a great help.

Are all your rows exactly the same height? That is a requirement for Scroller.

Allan

kazibbil

@allan
Could you refresh your sentence,

"Are all your rows exactly the same height?"

allan

From this example:

Note that Scroller requires that all rows are of the same height (in order to perform its positional calculations).

Is that the case in your table?

As I say, if you could link to a page showing the issue, that would greatly improve my chances of being able to offer some help.

Allan