Pagination Not Working With Ajax & Server-side Processing

pbuchi2000

I have read quite a few solutions to this but none cover my case so I hope somebody can shed some light.

I fetch the table rows via an Ajax call to a REST API on our server. The server returns a "Content-Range" header indicating currently shown records, total records etc.

I intercept the "xhr.dt" event so I can pull the "Content-Range" headers info into the returned data and reformat the returned data in the expected format i.e.

"draw": 1,
"recordsTotal": 100,
"recordsFiltered": 100,
"data": []

But the pagination keeps saying
Showing 0 to 0 of 0 entries (filtered from NaN total entries)

The table declaration with Ajax event handler is:

var _this = this;
this.dataTable = $(ReactDOM.findDOMNode(this.dataTableElem))
        .addClass('nowrap')
        .dataTable({
            ajax: ajaxRequestObj,
            columns: this.tableColumns,
            dom: '<f<t>lip>',
            responsive: true,
            serverSide: true
        })
        .on('xhr.dt', function(e, settings, json, xhr){
            var parsedContentRange = _this.parseContentRange(xhr.getResponseHeader('Content-Range'));
            var formattedTableData = {};
            formattedTableData.recordsTotal = parsedContentRange.total;
            formattedTableData.recordsFiltered = parsedContentRange.total;
            formattedTableData.draw = settings.iDraw;
            formattedTableData.data = json;
        });

parsedContentRange just turns the string "items 0-3/4" into {start: 0, end: 3, total: 4}

Unfortunately I can't give a link to a working example because this is all running in a local test environment at the moment.

pbuchi2000

Here is the table. The data shows correctly, just the pagination is wrong.

imran.cse

fetching same problem