couldn't load the data to the datatable using server side pagination

Question

I have tried to implement the server side pagination concept for my table (jQuery(v1.12.4),datatable(v1.10.15))

As per the datatable server side pagination documentation

I have enabled serverSide, paging, processing as true and specified the sPaginationType along with the ajax.

In the Custom Data Source Property article, it is mentioned that we need to use dataSrc Option being used as a string to get the data from a different source property, in this case demo but it could be any value, included a nested property by using standard dotted Javascript object notation.

I have used the dataSrc as per the above point ie., "dataSrc": "data" based on my json response.

However the data is not being loaded.

My table loads only the approve button (which i have defined in the columns section) rest of the columns are empty. - convening that the data are not rendered in the table.

Refer Output 2 image.

Since I have used deferLoading first page returns empty data. Refer Output 1 image.

I have referred all the below mentioned articles

Custom data source property dataSrc and pagination issue

Datatables server side processing pagination issue

The code is snippet is shown below, please help

$('#vschildtable').DataTable({
        "language": {
            "processing": "Please
            wait - LOADING SCAN Result...", "
            emptyTable " : "
            Currently no
            data found in this project " }, "
            bJQueryUI " : true, "
            paging " :
            true,
            "sPaginationType": "full_numbers",
            "processing ": true,
            "serverSide": true,
            "columns": [{
                    "defaultContent": "",
                    "visible": false
                }, {
                    "defaultContent": "",
                    "visible": false
                }, {
                    "defaultContent": ""
                }, {
                    "defaultContent": ""
                }, {
                    "defaultContent": ""
                }, {
                    data: null,
                    defaultContent: ' <
                        button type = "button"
                    class = "btn-approve label label-link bg-green " > Approve < /button>
                    ' } ], "deferLoading" : 57, "ajax" : { "url" : "emppage?empID=" +
                    encodeURIComponent(empID) + "&projectId=" +
                    encodeURIComponent(projectID) + "&subProjectId=" +
                    encodeURIComponent(subProjectID) + "&pageNo=" +
                    encodeURIComponent(offset),
                    type: 'POST',
                    datatype: "jsonp",
                    "dataSrc": "data"
                }
            });

Json response:

    [{
   "message":"SUCCESS",
   "data":"{\"data\":\[{\"projectId\":1,\"subProjectId\":1,\"empID\":765,\"empName\":\"Arjun\",\"empIDVersion\":\"1%3A4.1.4\",\"fkempID\":7781,\"tmpempID\":354999,\"noOfDept\":1,\"rowNo\":1,\"totalnoOfDept\":1},{\"projectId\":1,\"subProjectId\":1,\"empID\":765,\"empName\":\"Arjun\",\"empIDVersion\":\"4.0.18.1\",\"fkempID\":7781,\"tmpempID\":355000,\"noOfDept\":1,\"rowNo\":2,\"totalnoOfDept\":1},{\"projectId\":1,\"subProjectId\":1,\"empID\":765,\"empName\":\"Arjun\",\"empIDVersion\":\"4.2.1\",\"fkempID\":7781,\"tmpempID\":355001,\"noOfDept\":1,\"rowNo\":3,\"totalnoOfDept\":1}\]}"
}]

Answer 1

As far as I can see, there's missing information in the data returned by the server. DataTables expects some specific data (draw,recordsFiltered,etc.) from the server when running in server side mode. You can check here

Furthermore, You should add the data property to each object in the columns array, specifying the name of the data you expect to render in that column, i.e.:

columns:[
    { data:'projectId'   }
    { data:'subPorjectId'}
    ...
]

this tells DataTables what data to show in which column.

Hope it helps!