Angularjs datatable server page pagination

Question

I'm trying to bind to the server side of Angularjs Datatable in this link https://l-lin.imtqy.com/angular-datatables/#/serverSideProcessing

Therefore i use this code

$scope.dtOptions = DTOptionsBuilder.newOptions() .withOption('ajax', { dataSrc: function(json) { conole.log(json) json['recordsTotal'] =json.length json['recordsFiltered'] = json.length json['draw']=1 conole.log(json) return json; }, url: 'api/footestrecords', type: 'GET' }) .withOption('processing', true) .withOption('serverSide', true) .withPaginationType('full_numbers'); 

I added recordsTotal, recordsFiltered and a row manually in the dataSrc parameter

and this is json data before and after adding recordsTotal, recordsFiltered and row

json data before adding

 [Object, Object, Object, Object, Object, Object, Object, Object, Object,Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] 

json data after adding

  [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object,Object, Object, recordsTotal: 28, recordsFiltered: 28, draw: 1] 

the problem with pagination does not work, the data table shows all the data on one page, and when I click the paging button, there was no action.

Answer 1

The returned JSON format should be:

 { data: [{Object},{Object},{Object},{Object}…] draw: "1" recordsFiltered: 91 recordsTotal: 91 } 

You can get here a complete tutorial on Swap, Sort, and Filter on Server-Side Server Servers

Answer 2

Remove .dataSrc and use this option:

 .withDataProp(function(json) { console.log(json); json.recordsTotal = json.response.total; json.recordsFiltered = json.response.total; json.draw = 1; return json.response.data; }) 

Modify json.response to suit your object.

Answer 3

 The return data must be list of object ["data"]=[{name:john,id:1},{name:jason,id:2}]. Try .withOption('ajax', { dataSrc: function(data) { return data.data; } }) Else, .withOption('ajax', { "dataSrc": "data" }