Server side pagination is not rendering the table data

I am trying to do pagination from the server side. My project tech stack is MongoDB + Spring + Angular + Angular-datatables.

MongoDB provides very simple method to retrieve the data according to pagination and sorting parameters

URL to fetch the data is pasted here which is a 'POST' request and also would like to send the few other parameters with request body

 /myapp/products/filter?pageSize=10&pageNo=1

After some googling and going through the jQuery DataTables manual, I found out how to make this in angular-datatables. Pasted the code below:

     vm.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
            url : '/myapp-api/products/filter',
            type : 'POST',
            contentType : 'application/json',
            dataType :'json',
            accepts: "application/json",
            headers: {
                Accept: "application/json",
                Authorization : 'Bearer eyJ0eXAiO.eyJpZCI6IjU1OhSbNTdmIoq1Y'
            },
            data:function(d){
                     var pageNo = d.start;
                 var pageSize = d.length;
                     return JSON.stringify( d );
            },
            success:function(response){
                console.log(" ajax > post > success > response > ", response);
                var page = {
                    "draw":1,
                    "data" : response.list,
                    "recordsTotal" :response.list.length,
                    "recordsFiltered" :response.list.length
                };
                return page;
            }
        })
        .withDataProp('data')
        .withOption('processing', true)
        .withOption('serverSide', true)
        .withPaginationType('full_numbers');

I am able to receive the response successfully but the datatable is not displaying the data. In the success function callback, returning the data as per the format which is mentioned in datatables web pages.

Along side, I have few more queries:

  1. Can I use $http.post method to retrieve the data from the server, I understand that datatables has some mechanism which is calling the ajax on each action done in the datatables.

  2. The data: function(){} gives me the entire datatable column and other details in object format, used JSON.Stringify(data) as workaround.

My server side implementation expects the JSON data and I need only few parameters out of it.

Has anyone here has done the implementation using $http.post method. when I tried it, It was giving me the error:

TypeError: Cannot read property 'aDataSort' of undefined

    $scope.dtOptions = DTOptionsBuilder.newOptions()
     .withOption('ajax', function(data, fnCallback, settings) {
            $http.post('/myapp/products/filter?pageNo=1&pageSize=10', {}).then(function(response) {
                  fnCallback(response);
     });      
    })
    .withDataProp('list')
    .withOption('processing', true)
    .withOption('serverSide', true)
    .withPaginationType('full_numbers');

See the corrected code below.

You're not setting pageNo and pageSize as URL parameters correctly.

Also according to the manual, success method must never be overwritten as it is being used by DataTables internally. Instead you can define a callback with withDataProp that will be called when the response is received from the server.

Please note that with server-side processing draw parameter value in response has to match draw parameter value in the request. I'm using vm object to store its value between request and response.

Another thing worth mentioning is that you need to use DataTables version 1.10.6 or later for this code to work.

vm.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
       url : '/myapp-api/products/filter',
       type : 'POST',
       contentType : 'application/json',
       dataType : 'json',
       accepts: "application/json",
       headers: {
           Accept: "application/json",
           Authorization : 'Bearer eyJ0eXAiO.eyJpZCI6IjU1OhSbNTdmIoq1Y'
       },
       data: function(d, settings){
           var api = new $.fn.dataTable.Api(settings);

           // Update URL
           api.ajax.url(
              '/myapp-api/products/filter?pageNo=' + d.start + '&pageSize=' + d.length
           );

           // Store "draw" parameter
           vm.dtDraw = d.draw;

           return JSON.stringify(d);
       }
   })
   .withDataProp(function(json){
       console.log(" ajax > post > success > response > ", json);

       // Retrieve "draw" parameter
       json.draw = vm.dtDraw;

       json.recordsTotal = json.list.length;
       json.recordsFiltered = json.list.length;

       return json.list;
   })
   .withOption('processing', true)
   .withOption('serverSide', true)
   .withPaginationType('full_numbers');