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.

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"}
                ]
            });
           ...

I am using following js libs

cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css
cdn.datatables.net/scroller/1.4.3/css/scroller.dataTables.min.css"
code.jquery.com/jquery-3.1.0.js"
cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"
cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js"
cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"
cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"
cdn.datatables.net/scroller/1.4.3/js/dataTables.scroller.min.js"

Thanks in advance
Cheers
Edd

marcpirat

finally have you been able to get it working?