Padma Padma - 29 days ago 19
Groovy Question

Unable to set iTotalRecords and iTotalDisplayRecords in datatable

The datatable is showing the aaData values but the pagnation is wrong.

$("#tableData").DataTable({
"bProcessing": true,
"bServerSide": true,
"bsort":true,
"orderMulti":true,
"sAjaxSource":"datalist",
"sAjaxDataProp": function ( json ) {
var msgObj = JSON.parse(json);
console.log(msgObj)
return msgObj.aaData ;
} ,

"aoColumns": [

{ "data": "scheduleId" },
{ "data": "startTime" },
{ "data": "endTime" },
{ "data": "selectFlag" }
]


});


This is the json data:

{"iTotalRecords":7,"iTotalDisplayRecords":7,"aaData":[{"scheduleId":1,"startTime":"02:00","endTime":"04:00","selectFlag":false},{"scheduleId":2,"startTime":"02:00","endTime":"04:00","selectFlag":false},{"scheduleId":3,"startTime":"02:00","endTime":"04:00","selectFlag":false},{"scheduleId":4,"startTime":"02:00","endTime":"04:00","selectFlag":false},{"scheduleId":5,"startTime":"02:00","endTime":"04:00","selectFlag":false},{"scheduleId":6,"startTime":"02:00","endTime":"04:00","selectFlag":false},{"scheduleId":7,"startTime":"03:00","endTime":"04:00","selectFlag":false}]}


Below I have attached the image of datatable.

Datatable

Can you please point out the mistake I have made?

Answer

Remove sAjaxDataProp option, it's not needed. Also your JSON response is missing sEcho parameter, which is unaltered copy of sEcho sent from the client side.

See Example JSON return for more details.

See this example for code and demonstration. Please note that the example will not sort/filter/paginate correctly because there is no server-side script available.

Comments