Pagination issue with Server-side processing of Jquery datatable

Question

User1284890338 posted

Hi All,

I am using jquery datatable (1.10.0) for server side processing (as number of records is large).

Issue: Data is not getting binded to the table even though response is correct. But it does work of i set DataSrc but then pages are not correctly rendered, may be it is not able to find recordsTotal and recordsFiltered.

Here is the code on client:

$("#table-pp").DataTable({        
        "order": [[2, "asc"]], 
        "pagination": true,
        "language": {
            "infoFiltered": ""
        },
        "serverSide": true,
        "ajax": {
            "type": "POST",
            "url": "/Site/pp/Getdata",
            "data": { param1: test, param2: "" },
            "error": function (e) {
            },
            //"dataFilter": function (data) {
            //    debugger;
            //    var json = JSON.parse(data);
            //    json.recordsTotal = json[0].recordsTotal;
            //    json.recordsFiltered = json[0].recordsFiltered;
            //    json.data = json[0].data;

            //    return JSON.stringify(json); // return JSON string
            //},
            "dataSrc": function (d) {
                d = JSON.parse(d);
                //d.draw = d.draw;
                //d.recordsTotal = d.recordsTotal;
                //d.recordsFiltered = d.recordsFiltered;
                return d.data;
            }
        },

        
        "columns": [
            {
                "data": "Id", "orderable": false,
                "render": function (data) {
                    return '<a class="margin-right-lg margin-top-lg" href="/Site/pp/Edit/' + data + '"><span class="glyphicon glyphicon-pencil" aria-hidden="true" data-id="' + data + '"></span></a>' +
                        '<span class="glyphicon glyphicon-trash margin-top-lg ppid" aria-hidden="true" data-id="' + data + '" onclick="alert(this);"></span>';
                }
            },
            {
                "data": "Id", "title": "Copy", "orderable": false,
                "render": function (data) {
                    return '<a class="margin-right-lg margin-top-lg" href="/Site/pp/Copy/' + data + '"><span class="fa fa-copy" aria-hidden="true" data-id="' + data + '"></span></a>';
                }
            },
            {
                "title": "Priority", "data": "Priority", "width": "200px",
                "render": function (data) {
                    return '<span style="display:none">' + data + '</span><input type="number" class="display-order" onblur="alert(this);" value="' + parseInt(data) + '">';
                }
            },
            { "title": "Name", "data": "Name" }
        ]
    });
    

API response:

{"draw":1,"recordsTotal":14,"recordsFiltered":10,"data":[{"Id":345,"Country":null,"TotalCount":14},...... hidden for security purposes]}

I get below after data display in datatable: Showing 0 to 0 of 0 entries

Incorrect number of pages as well