Showing 0 to 0 of 0 entries (filtered from NaN total entries) In jQuery Datatable

Question

Hi all I am new to jQuery Datatable. I am working on server-side for datatable. Most of things I have figured out but I am stuck on pagination part, currently I am getting filtered from NaN total entries in table although I have data and I tried processing it correctly.

Issue - I need to convert the backend response as per the datatable. For that purpose I am using dataSrc property of datatable. I need to send custom payload to backend for that I am using data property provided by datatable. But Pagination is not working for me.

Backend Response -

{
    content:[{},{},{}], //data
    number:0,
    numberOfElements:10,
    pageable:{
        offset:0,
        pageNumber: 0,
        pageSize: 10,
        paged: true
    },         
    sort:{
        empty: false,
        sorted: true,
        unsorted: false
    },        
    size:10, //number of rows I want to load at once 
    totalElements20, //total number of available record 
    totalPages:2 //number of pages 20/10 = 2 so total pages is 2 for total records 20
}

I am getting a response something like this from the backend.

My code -

$scope.onPageload=()=>{
            var settings={
                "url":"ApiToLoadData?pageNumber=1&size=5&field=firstName",
                "method":"GET",
                "headers": {
                    "Authorization": "Bearer Token"
                },
            }
            $.ajax(settings).done(function(data){
                $('#dataTable').DataTable().destroy();
                $scope.tableData=data;
                $('#dataTable').ready(function () {
                    $('#datatable').DataTable( {
                        columns: [
                            { "data": "firstName" },
                            { "data": "lastName" },
                            { "data": "email" }
                        ],
                        "processing": true,
                        "serverSide": true,
                        "ajax":{
                            "url": "ApiToLoadData",
                            "dataType": 'json',
                            "type": "GET",
                            "beforeSend": function(xhr){
                                xhr.setRequestHeader("Authorization",
                                    "Bearer Token");
                            },
                            "data": function ( d ) {
                                if(d.start > 1){
                                    d.pageNumber = d.start/10;
                                }else{
                                    d.pageNumber = d.start;
                                }
                                d.size = d.length; //sending length of the table
                                d.field = ""; //field is the column name which need to be sorted
                                if(d.order[0].column == 0){  //written logic to send hardcode name to backend based on column number
                                    d.field = "firstName";
                                }else if(d.order[0].column == 1){
                                    d.field = "lastName";
                                }else if(d.order[0].column == 2){
                                    d.field = "email";
                                }
                                console.log("final Payload to make reques",d);
                            },
                            "dataSrc": function ( json ) {
                                var newData = Object.assign({}, json);
                                delete newData.totalElements;
                                newData.recordsTotal = 100; // tried with hardcoded value
                                newData.recordsFiltered = 100; // tried with hardcoded value
                                newData.data=json.content;
                                delete newData.deletingAllUnnecessaryObjects;
                                newData.draw = json.number;

                                // return newData.data;        // if I return newData.data then data is showing on table. but still pagination is working but number of records and buttons are not correct

                                var finalDataArrayObj={};
                                finalDataArrayObj.data = json.content;
                                finalDataArrayObj.recordsTotal = 100;
                                finalDataArrayObj.recordsFiltered = 100;
                                finalDataArrayObj.draw = json.number;

                                return finalDataArrayObj; // if I pass a new object then data is not showing on table. pagination not working
                            }
                        }
                    });
                })
                $scope.$apply();
            }).fail(function(err){
                console.log(err);
            });
        }
    });

from the docs of jQuery datatable I have found that we should have this type of response -

"draw": 1,
"recordsTotal": 57,
"recordsFiltered": 57,
"data": [{}]

I am returning finalDataArrayObj that is having same json data as given in the example still my pagination is not working. I am sure I am doing something wrong in returning the response from dataSrc. How can I resolve this issue?

Below I am attaching the ScreenShot of issue -