Datatables Scrolling Data not being Called

Datatables Scrolling Data not being Called

bkerberbkerber Posts: 2Questions: 1Answers: 0

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.

Answers

  • bkerberbkerber Posts: 2Questions: 1Answers: 0

    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.

  • imedele1imedele1 Posts: 1Questions: 0Answers: 0

    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.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

This discussion has been closed.