I am trying to implement paging on the data server side using datatable and rest api corner calls. The problem the problem is when I click on the next paginated button, the data sent from the server is not loaded into the datatble after a successful callback. It displays the message “processing ..” and therefore gets stuck. Here is my controller code.
vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('ajax', {
headers: {
'Content-Type': 'application/json',
'Authorization': $rootScope.currentUser.authToken
},
error : function (xhr,status,error)
{
if(status === 401){
window.location.replace("/pc-web/userHome");
errorFlash(error);
}
},
url: GET_ROOMLIST,
type: 'GET'
})
.withDataProp(function(json) {
console.log(json);
return json.data;
})
.withOption('processing', true)
.withOption('serverSide', true)
.withDOM('frtip')
.withDisplayLength(9)
.withOption('createdRow', function (row) {
$compile(angular.element(row).contents())($scope);
})
.withOption('saveState', true)
.withOption('order', [0, 'asc'])
.withPaginationType('simple_numbers')
.withButtons([
{
extend: 'csvHtml5',
text: 'Export',
titleAttr: 'CSV',
exportOptions: {
columns: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
}
}])
.withOption('initComplete', function(settings) {
$compile(angular.element('#' + settings.sTableId).contents())($scope);
})
;
The data returned from the server has the format:
data:(9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
draw:1
message:null
recordsFiltered:100
recordsTotal:100
success:true
Im using datatable version: * angular -datatables - v0.5.6 * https://github.com/l-lin/angular-datatables
angular js version: 1.5.6