如何在 Javascript 中对自定义修改数据进行 Datatables 服务器端分页？答案

【问题标题】：How to do Datatables Server side pagination for custom modified data in Javascript?如何在 Javascript 中对自定义修改数据进行 Datatables 服务器端分页？
【发布时间】：2015-07-01 18:24:50
【问题描述】：

我有一个表格，里面填满了数据并像这样初始化。

$.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 源自己处理的。但是在提供给我在当前代码中完成的表格之前，我必须修改要在表格中显示的数据。我必须做同样的过程，但有分页。我似乎找不到一个例子来解释我的这种要求的分页。

【问题讨论】：

dataTable 默认分页。你能解释一下你在当前表中看到的内容吗？
@JAG，是的，数据表默认分页。目前我正在从表中获取整个数据。但我想做服务器端分页，如示例链接所示..
为此，您需要修改您的api 方法，该方法接受附加参数（pageLength、pageNumber、searchString...）并返回data 以及draw、recordsTotal，和recordsFiltered。你有权限修改api方法吗？
@JAG，是的。我可以访问前端和后端。我想过做这样的事情.. datatables.net/reference/option/ajax.dataSrc .

标签： javascript jquery ajax pagination jquery-datatables

【解决方案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();
                }
            }
        });
    }
});

【讨论】：