Prevent loading while scrolling

ThisBytes5

I have the code below, everything pretty much works, but the issue I'm running into:

When I get to record 25 in the scroll the AJAX call is executed again, causing the table to refresh. Currently it returns 87 records, which means 26-87 is never displayed.

The back end returns all the data when called, as such I can't page, nor can I handle lazy loading at record 26. How do I get the datatable to display/scroll through all 87 rows before executing the AJAX call?

    var recentPlatformTable;
    var api;
    var curRow = 0;
    var timer;

    $(document).ready(function () {
        recentPlatformTable = $('#recentPlatformTable').dataTable({
            lengthChange: false,
            iDisplayLength: -1,
            serverSide: true,
            ajax: {
                url: "/account/GetRecentPlatformBookings",
                contentType: 'application/json; charset=utf-8',
                type: "POST",
                data: function (data) {
                    curRow = 0;
                    setTimer();
                    return data = JSON.stringify(data);
                },
            },
            processing: true,
            paging: true,
            searching: false,
            sorting: false,
            "scrollY": "170px",
            "scrollCollapse": false,
            "ordering": false,
            deferRender: false,
            columns: [
                { "data": "ID" },
                {
                    "data": "HotelName",
                    render: function (data, type, row) {
                        return '<div style="white-space: nowrap; overflow:hidden; text-overflow:ellipsis;width:100px;">' + data + '</div>';
                    }
                },
                {
                    "data": "HotelCity",
                    render: function (data, type, row) {
                        return '<div style="white-space: nowrap; overflow:hidden; text-overflow:ellipsis;width:100px;">' + data + '</div>';
                    }
                },

                { "data": "HotelState" },
                { "data": "ReservationTotal" },
                { "data": "CustomerSavings" },
                { "data": "GrossProfit" },
                { "data": "EstimatedMatrixPayout" },
                { "data": "EstimatedTACPPayout" },
                { "data": "EstimatedCompanyShare" }
            ],
            responsive: false,
            info: false,
            scroller: true,
            "footerCallback": function (row, data, start, end, display) {
                api = this.api();
            },
        });

        $('.dataTables_paginate').hide();
        $('.dataTables_scrollFoot').hide();
        $('.dataTables_scrollBody').css('overflow', 'hidden');
    });

    function setTimer() {
        if (timer) {
            clearInterval(timer);
        }

        timer = setInterval(function () {
            if (api === undefined)
                return;

            var num_rows = api.page.info().recordsTotal;
            curRow += 1;
            console.log("*****row " + curRow + " of " + num_rows);

            if (curRow > num_rows) {
                console.log("*****Reloading");
                clearInterval(timer);
                recentPlatformTable.DataTable().ajax.reload();
            }
            else {
                api.settings().scroller().scrollToRow(curRow, 1000);
                console.log(api.rows({ page: 'current' }).data());
            }
        }, 1000);
    }

colin

Hi @ThisBytes5 ,

It looks like your line 15 is wrong - you're modifying what is being sent to the server with ajax.data, as opposed to the return which is ajax.dataSrc. I'd suggest looking into that and seeing if it resolves the problem,

Cheers,

Colin

ThisBytes5

Thank you fro the reply

however, the datasrc didn't prevent it from re-fetching the data while scrolling, even if I turn off my timer and scroll with the scroll bar/mouse wheel.

Not sure where to go from here

kthorngren

I have some questions about your config. You have this:

        iDisplayLength: -1,
        serverSide: true,

The iDisplayLength (pageLength for current Datatables) is set to -1 which means all rows. So basically you are requesting all rows from the server effectively negating the benefits of server side processing. You will want to set iDisplayLength to the number of rows you want returned.

This example will highlight this. It has the default page length of 10:
https://datatables.net/extensions/scroller/examples/initialisation/server-side_processing.html

I'm guess this is just a test environment but I have to ask If you ahve only 85 rows do you really need server side processing?

Not sure I understand what you are trying to achieve with the above code. If it works for you thats fine but if not please describe what you are trying to do so we can help. If you still have issues it would be best to put together a running test case we can work with.

Kevin

ThisBytes5

Currently only 85 rows, new site when I first wrote the code there were only 15 records so the issue I have wasn't displayed previously. However, given my task I don't think I'll benefit from server side anyway other than refreshes.

What I'm trying to do:

I was given a task to return data to the table in a random order, then have the table auto scroll through the items in the table. When it reaches the end, refresh the table with up to date data, again in a random order.

Since it has to be random, I can't use the paging capability, and I must return all the data at once. This is all working, except when I hit row 25 it appears Datatables is re-requesting data, and as such timer gets reset and table scrolled back to top, so the last 60ish rows are never seen.

kthorngren

I put your basic code here:
http://live.datatables.net/lurajewe/1/edit

It seems to mostly work. I made one change to use the xhr event to reset the counters.

This is not using server side processing.

Kevin

ThisBytes5

kthorngren,

I can't thank you enough for this solution, worked perfectly.