Unable to display JSON response in Jquery datatable when server side pagination is clicked

praveen_psna

I am new to jquery datatable so I need help in fixing this issue:

Whenever clicking on 'Next' page, api is getting called and response json is also displayed in datatable. Now, Clicking on 'Previous' page button, api is getting called and also able to get response from backend but datatable is not resetting with new JSON data.

Please guide me to fix this.

The following is my code:

Javascript:

$(document).ready(function() {
var empColumns = [];
empColumns.push({
"sTitle" : "Emp.Id",
"sClass" : "left",
"sWidth" : "10%"
}, {
"sTitle" : "Name",
"sClass" : "left",
"sWidth" : "10%"
}, {
"sTitle" : "Designation",
"sClass" : "left",
"sWidth" : "10%"
});

$("#example").dataTable( {
"bProcessing": false,
"bServerSide": true,
"sort": "position",
"bStateSave": false,
"iDisplayLength": 10,
"iDisplayStart": 0,
"sAjaxSource": "api/getEmpDetails",
"aoColumns": empColumns
});
});
JSON Data:

{
"draw": 1,
"recordsTotal": 57,
"recordsFiltered": 57,
"data": [
[
"1",
"Marshall",
"Regional Director"
],
[
"2",
"Hurst",
"Javascript Developer"
],
[
"3",
"Rios",
"Personnel Lead"
],
[
"4",
"Snider",
"Customer Support"
],
[
"5",
"Wilder",
"Sales Assistant"
],
[
"6",
"Camacho",
"Support Engineer"
],
[
"7",
"Green",
"Chief Operating Officer (COO)"
],
[
"8",
"Winters",
"Accountant"
],
[
"9",
"Joyce",
"Developer"
],
[
"10",
"Cortez",
"Team Leader"
]
]
}
Thanks in Advance....