javascript - 如何在 Javascript 中对自定义修改数据进行数据表服务器端分页？

Question

我有一个充满数据并像这样初始化的表。

$.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) {

    }
});

此处将显示表的全部数据。我想对此进行分页。我已按照此链接中的示例进行操作。

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

但是数据似乎是直接从服务器提供给dataTable的ajax源，而且分页也是由服务器端ajax源自行处理的。但我必须先修改要在表中显示的数据，然后再提供给表，这是我在当前代码中所做的。我必须执行相同的过程，但要分页。我似乎找不到一个例子来解释我的需求的分页。

Answer 1

试试这个方法。

内部调用api

检查服务器端的输入参数并修改您的 api 方法以根据该参数查询和重新调整数据。

注意:如果可能，返回json，而不是返回xml并解析

$("#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();
                }
            }
        });
    }
});