Datatables Scrolling Data not being Called

bkerber

Hello!

I've been trying to use the datatables scroller to load data dynamically as the scrolling happens. The only problem I'm having is with triggering the ajax to fire again. It doesn't call the ajax in an appropriate position in the table. The same problem occurs in the 50k example on this website.

I've been able to get it to fire by manually setting a height between 25 and 50 viewport height. Here's my initialization:

DOM:

`<table id="permissionsTableList" class="hbs-grid hbs-list" style=" width:98%;height: 25vh !important">
        <thead>

        </thead>
        <tbody></tbody>
    </table>
`

Datatables initialization:

 $('#permissionsTableList').dataTable({
                destroy: reinit,
                "bScrollInfinite": true,
                "bScrollCollapse": true,
                "order": [0, 'asc'],
               "deferRender": true,
                "scrollY": "50vh",
                "serverSide": true,
                "scroller": {
                    loadingIndicator: true,
                    
                },
                "ajax": function (data, callback, settings) {

                    $.ajax({
                        type: "GET",
                        url: "URL?handler=GetData",
                        data: { start: data.start, length: 50 },
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("XSRF-TOKEN",
                                $('input:hidden[name="__RequestVerificationToken"]').val());
                        },
                        success: function (d) {
                                setTimeout(function () {
                                    callback({
                                    draw: data.draw,
                                    data: d,
                                    recordsTotal: @Model.Data.Count(),
                                    recordsFiltered: @Model.Data.Count(),
                                });
                            }, 50)
                        }
                    })
                },

Any help figuring out this problem is apprfiated.

bkerber

I figured out my problem. I didn't realize that I couldn't specify a number of rows to enter in. Using the data.length property in the ajax call ended up solving my problem.

imedele1

Can you please provide the code for the solution?
I'm having the same problem. When I scroll the ajax doesn't trigger the controller in time.

Thank you in advance.

colin

Hi @imedele1 ,

This is a known problem, I'm afraid. It's been logged internally (DD-13) and we'll report back here once addressed. Sorry for the inconvenience.

Cheers,

Colin

colin

Hi @imedele1 ,

This has been resolved in the nightly builds and can be tested there - it will be included in the next Scroller release. Could you please retest with that nightly build and see if it fixes your specific issue. You can find the nightly releases here.

Cheers,

Colin