How to do Datatables Server side pagination for custom modified data in Javascript?

Question

I've a table which is filled with data and initialised like this.

$.ajax({
    url: 'api/parent/child',
    type: 'POST',
    data: {
        sessionId: sessionId
    },
    success: function(data, status){
        if(status == 'success'){
            // data will be xml String
            xmlDoc = $.parseXML(data);
            var $events = $(xmlDoc).find("Loans");
            var thisTable;
            thisTable = $("#loan-data").dataTable({
                scrollX: true,
            });
            var eventChildren = $events.children("loan");
            eventChildren.each(function(index, event){
                var $event = $(event),
                addData = [];
                addData.push($event.children("loanNumber").text());
                addData.push(formatData($event.children("loanAmount").text()));
                addData.push($event.children("loanDuration").text());
                var loanStatus = $event.children("loanStatus").children("loanStatus").text();
                if(loanStatus == 'Pending'){
                    var dynamicdata = "<a id=\"editLoan\" href=\"#myModal\" data-id=\""+$event.children("id").text()+"\" data-loanamount=\""+$event.children("loanAmount").text()+"\" data-loanduration=\""+$event.children("loanDuration").text()+"\" data-toggle=\"modal\" class=\"editLoan\">"+"<button type=\"button\" id=\"editClick\" class=\"btn btn-info btn-xs\"><i class=\"fa fa-check\"></i> Edit</button></a>";
                    addData.push("<font color='orange'>"+loanStatus+"</font>");
                    addData.push(dynamicdata);
                }else if (loanStatus == 'Some Other' || loanStatus == 'Some Other 2'){
                    addData.push("<font color='green'>"+loanStatus+"</font>");
                    addData.push("");
                }else if(loanStatus == 'Some Other 3'){
                    addData.push("<font color='green'><b>"+loanStatus+"</b></font>");
                    addData.push("");
                }else {
                    addData.push("<font color='Red'>"+loanStatus+"</font>");
                    addData.push("");
                }
                thisTable.fnAddData(addData);
            });
            $('#loan-data').dataTable();
            $("#loading-gif-advanced").hide();
        }
    },
    failue: function(data) {

    }
});

Here the entire data for the table will be displayed. I would like to do pagination in this. I've followed the example in this link.

https://www.datatables.net/examples/data_sources/server_side.html

But it seems the data is directly given from the server to the dataTable's ajax source, also the pagination is handled itself coz of server side ajax source. But I've to modify the data to be displayed in my table before supplying to the table which is I've done in my current code. I've to do the same process but with pagination. I can't seem to find an example which explains pagination for my kind of requirement.

dataTable does pagination by default.. can you explain what you seeing in current table? — Ja9ad335h
– Ja9ad335h, Commented Apr 23, 2015 at 14:10
@JAG, yes datatables do pagination by default. Currently I'm feching entire data from table. But I would like to do server side pagination which is shown like in the example link.. — The Coder
– The Coder, Commented Apr 23, 2015 at 14:14
for that, you need to modify your api method, which takes additional parameters (pageLength, pageNumber, searchString...) and return data along with draw, recordsTotal, and recordsFiltered . do you have access to modify api method? — Ja9ad335h
– Ja9ad335h, Commented Apr 23, 2015 at 14:29
@JAG, yes.. I've access to both frontend and backend. I was thought of doing something like this.. datatables.net/reference/option/ajax.dataSrc . — The Coder
– The Coder, Commented Apr 23, 2015 at 14:31

Ja9ad335h · Accepted Answer · 2015-04-23 15:03:41Z

try this method.

which calls api internally

check the input parametrs at the server side and modify your api method to query and retun data based on that parameters.

Note: return json if possible, instead returning xml and parsing

$("#loan-data").dataTable({
    "processing": true,
    "serverSide": true,
    "ajax": "api/parent/child",
    "aoData": { sessionId: sessionId },
    "fnServerData": function (sSource, aoData, fnCallback) {
        $.ajax({
            type: 'POST', // or 'GET'
            url: sSource,
            data: aoData,
            success: function(data, status){
                if(status == 'success'){

                    //conversion from xml to javascript array

                    // and the final object will lool like
                    //var newData = {
                    //  "draw": 9,
                    //  "recordsTotal": 57,
                    //  "recordsFiltered": 57,
                    //  "data": adddata //created from xml
                    //}

                    fnCallback(newData);
                    $("#loan-data").show();
                }
            }
        });
    }
});

Collectives™ on Stack Overflow

How to do Datatables Server side pagination for custom modified data in Javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related