Datatable Scroll using Ajax REST Calls

eddmonton

Hi there,

I am trying to integrate datatables to an application to display a relatively huge amount of data from a Rest API (2000 - 60000 Rows).

The Datatable should use Server-Side-Processing with Scrolling functionality like the example shown here: https://datatables.net/extensions/scroller/examples/initialisation/server-side_processing.html.

I've already implemented the Rest Service (Spring Boot, JPA with Pagination). The Request requires two params an id (of the parent entity ) and pageNumber.

e.g. http://localhost:8080/api/listitems?id=10&pageNumber=0

I am not a JS expert, but I tried to build the frontend myself but it's not working as expected.
Currently the first call of the page loads the first set of data, when I scroll down, the next page get loaded (I can see that in Chrome debugger), but the data ist not displayed in UI...

I think i am not too far from solving this issue. But for now I think I need support from someone who is really experienced with Datatable, Ajax (Scroll based Ajax request ...) and JS.

<code>
var table = $('#raceitems').DataTable({
serverSide: true,
ordering: false,
searching: false,
paging: true,
scrollY: 500,
scroller: {
loadingIndicator: true
},
scrollCollapse: true,
ajax: function (data, callback, settings) {
//debugger;
$.ajax(
{
url: "/api/listItems",
type: "GET",
data: {
"id": parentId,
pageNumber: data.draw - 1
},
dataType: "json"
}).done(function(response) {
callback(
{
draw: response.draw,
data: response.raceItems,
recordsTotal: response.recordsTotal,
recordsFiltered: response.recordsFiltered
}
);
}).fail(function(err){
console.error('error...', err)
})

            },
            columns: [
                {
                    "className": 'details-control',
                    "orderable": false,
                    "data": null,
                    "defaultContent": '',
                    "render": function () {
                        return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
                    },
                    width: "15px"
                },
                {"data": "rank"},
                {"data": "fancierName"},
                {"data": "speed"}
            ]
        });

        // Add event listener for opening and closing details
        $('#raceitems tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var tdi = tr.find("i.fa");
            var row = table.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
                tdi.first().removeClass('fa-minus-square');
                tdi.first().addClass('fa-plus-square');
            }
            else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
                tdi.first().removeClass('fa-plus-square');
                tdi.first().addClass('fa-minus-square');
            }
        });

        table.on("user-select", function (e, dt, type, cell, originalEvent) {
            if ($(cell.node()).hasClass("details-control")) {
                e.preventDefault();
            }
        });
    });

</code>

I am using following js libs

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/1.4.3/css/scroller.dataTables.min.css" />

Thanks in advance
Cheers
Edd