Following is the JS and HTML code for DataTable:
$('#batchListTable').DataTable({
serverSide: true,
processing: true,
paging: true,
pageLength: 10,
lengthMenu: [
[10, 25, 50, 100, -1],
[10, 25, 50, 100, "All"]
],
order: [
[4, "desc"]
],
ajax: {
url: '/api/batch/list',
dataType: "json",
dataSrc: 'result.data'
},
columns: [{
data: 'batchName',
title: 'Name',
render: function(data, type, row, meta) {
return _.escape(data);
}
},
{
data: 'batchStatus',
title: 'Status',
searchable: false,
render: function(data, type, row, meta) {
switch (parseInt(data, 10)) {
case 0:
return 'Config Pending';
case 1:
return 'Created';
case 2:
return 'Processing';
case 3:
return 'Completed';
case 4:
return 'Archived';
default:
return 'Unknown';
}
}
},
{
data: 'inputFile',
title: 'Input File'
},
{
data: 'createTs',
title: 'Create Time',
searchable: false,
render: function(data, type, row, meta) {
var t = data.split(/[- :]/);
var d = new Date(Date.UTC(t[0],
t[1] - 1, t[2], t[3],
t[4], t[5]));
var options = {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
};
return d.toLocaleDateString(
"en-US", options);
},
},
{
data: 'batchId',
title: 'Actions',
searchable: false,
render: function(data, type, row, meta) {
return '<a class="btn btn-success btn-sm editBatchBtn" href="/batch/edit?id=' + data + '" role="button" title="Edit Batch"><span class="material-icons">edit_note</span></a>';
}
}
]
});<html>
<head>
<title>Sample Table</title>
</head>
<body>
<table id="batchListTable"></table>
</body>
</html>I'm trying to get the dynamic data from server side, as you can see in the above code snippet. Following is a sample response which I'm receiving from server:
{
"requestId": "437f0dbb-c0a7-4b3d-ab1f-fba957122442",
"success": true,
"result": {
"data": [{
"batchId": 27,
"batchName": "ABC",
"inputFile": "ABC.csv",
"createTs": "2022-09-05 18:30:00",
"deleteFlag": 0,
"batchStatus": 0
}, {
"batchId": 27,
"batchName": "DEF",
"inputFile": "DEF.csv",
"createTs": "2022-09-05 18:30:00",
"deleteFlag": 0,
"batchStatus": 0
}...],
"draw": "1",
"recordsFiltered": 13,
"recordsTotal": 13
}}
However, with the above response, the Datatable is able to extract the data from the defined dataSrc tag, but is unable to read the recordsFiltered and recordsTotal values and failing to render the Pagination links correctly (See screenshot below). If I remove the ajax.dataSrc config and then return the data, recordsFiltered and recordsTotal fields outside result tag, right into the root of the response structure, everything works just fine.
Wondering if Datatable is capable of reading the data from dataSrc tag, how would I let it know where to read the recordsFiltered and recordsTotal from. Unfortunately I'm out of touch with Datatables.net for a long time now and can't figure this out, which used to be very simple. Any help is appreciated.
Edit: I was able to figure out a workaround after further researching. This is really kind of a workaround, where the dataSrc is defined as a function. I feel there could be a more clean way to do this. Please suggest.
This works:
dataSrc: function(response) {
response.recordsTotal = response.result.recordsTotal;
response.recordsFiltered = response.result.recordsFiltered;
response.draw = response.result.draw;
response.data = response.result.data;
return response.data; }