Question

我无法在服务器端使用分页呈现Jquery DataTable。

我的DataTable结构如下：

$（ “＃MyTable的”）。数据表（{

        "bServerSide": true,
        "sAjaxSource": $("#apiUrl").attr("value") + "/myclass/myMethod",
        "sAjaxDataProp": "",
        "bProcessing": true,
        "bVisible": true,
        "order": [
            [1, "asc"]
        ],
        scrollX: true,
        "bAutoWidth": false,
        scrollCollapse: true,
        "oColReorder": {
            "iFixedColumns": 1
        },
            "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
                oSettings.jqXHR = $.ajax( {
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aoData,
                    "success": function (msg) {
                        fnCallback(msg.aaData);
                        //$("#members").show();
                    }
                } );
            },
            "columns": [
                    { "data": "Id" },
                    { "data": "VIN" },
                    { "data": "ModelGroupId" },
                    { "data": "Mark" }
            ],
        "sPaginationType": "full_numbers",
        "bVisible": true
    });

来自Ajax调用的JSON数据结构如下，有三行数据：

{ “aaData”：[{ “ID”： “1”， “VIN”： “VIN345345354345345”， “ModelGroupId”： “10”， “标记”： “NDE5234”}，{ “ID” “2”， “VIN”： “VIN345343445345”， “ModelGroupId”： “10”， “标记”： “NDE5234”}，{ “ID”： “3”， “VIN”： “VIN345343445345”， “ModelGroupId” ： “10”， “标记”： “NDE5234”}]， “sEcho”：1， “iTotalRecords”：3 “iTotalDisplayRecords”：3}

当我从AJAX成功调用fnCallback方法传递我的json数据时，DataTable显示无结果，代码如下：

            "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
                oSettings.jqXHR = $.ajax( {
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aoData,
                    "success": function (msg) {
                        fnCallback(msg);
                        //$("#members").show();
                    }
                } );
            }

这里的问题是，当我将json结果作为 fnCallback（msg）传递给fnCallback函数时，DataTable显示没有结果。但是当我将json数据传递给 fnCallback 函数作为 fnCallback（msg.aaData）时，DataTable能够在网格中呈现3条记录，但是其他与分页相关的信息来自服务器的页面信息将丢失为＆gt;＆gt; sEcho，iTotalRecords，iTotalDisplayRecords 是 msg 的一部分，而不是来自JSON的 msg.aaData 。

请有人帮忙吗？

Answer 1

我已经解决了这个问题，我尝试了不同的方法：

$（＆＃34;＃MyTable的＆＃34）。数据表（{

    "bServerSide": true,
    "bProcessing": true,
    "ajax": {
        "url": $("#apiUrl").attr("value") + "/myClass/myMethod",     //to call web API
        "type": "POST",
        "data": function (d) {  //extra parameters to append with Post Data
            d.order_0_column = d.order[0].column;
            d.order_0_dir = d.order[0].dir;
            d.ModelGroup = searchOptionObject.ModelGroup;
            d.RegistrationMark = searchOptionObject.RegistrationMark;
            d.VIN = searchOptionObject.VIN;
            d.StartDate = searchOptionObject.StartDate;
            d.EndDate = searchOptionObject.EndDate;
            d.Source = searchOptionObject.Source;
            d.Status = searchOptionObject.Status;

            for (i = 0; i < d.columns.length; i++)   //binding search parameters to fetch filter data from each column
            {
                d[d.columns[i].data + "_searchValue"] = d.columns[i].search.value
            }
        }
    },
    "sPaginationType": "full_numbers",
    "bVisible": true,
    "order": [
        [1, "asc"]
    ],
    scrollX: true,
    "bAutoWidth": false,
    scrollCollapse: true,
    "oColReorder": {
        "iFixedColumns": 1
    },
    "columns": [
                    { "data": "Id" },
                    { "data": "VIN" },
                    { "data": "ModelGroupId" },
                    { "data": "Mark" }
    ],
    "sPaginationType": "full_numbers",
    "bVisible": true,
                "columnDefs": [
                    {
                        "targets": [0],
                        "visible": false,
                        "searchable": true
                    }]

});

我的API类如下：

    [HttpPost]
    public parseJsonData SearchOption(SearchOption1 searchOption)
    {
        //write logic to fetch data from data source

        parseJsonData dto = new parseJsonData();
        dto.data = returnList;  // List of records
        dto.draw = draw;  //it should be same that you are getting from Client via Ajax call
        dto.recordsTotal = 24; // total records, should be from datasource
        dto.recordsFiltered = 24;  //filtered records, should be from data source
        return dto;
    }



Model Class:

public class SearchOption1
{
    public int draw { get; set; }
    public int start { get; set; }
    public int length { get; set; }
    public int order_0_column { get; set; }
    public string order_0_dir { get; set; }
    public int ModelGroup { get; set; }
    public string RegistrationMark { get; set; }
    public string VIN { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public int Source { get; set; }
    public int Status { get; set; }
    //You can add extra Parameters to map from Post data that you are getting from Ajax Call
}

public class parseJsonData
{
    public List<MyDataList> data { get; set; }
    public int draw { get; set; }
    public int recordsTotal { get; set; }
    public int recordsFiltered { get; set; }
}

发送给客户的Json结构：{＆＃34;数据＆＃34;：[{＆＃34; Id＆＃34;：＆＃34; 1＆＃34;，＆＃34; VIN＆＃34;：＆＃34; VIN345345354345345＆＃34;＆＃34; ModelGroupId＆＃34;：＆＃34; 10＆＃34;＆＃34;马克＆＃34;：＆＃34; NDE5234＆＃34;}，{＆＃34 ;标识＆＃34;：＆＃34; 2＆＃34;＆＃34; VIN＆＃34;：＆＃34; VIN345343445345＆＃34;＆＃34; ModelGroupId＆＃34;：＆＃34; 10＆＃34; ＆＃34;马克＆＃34;：＆＃34; NDE5234＆＃34;}，{＆＃34;标识＆＃34;：＆＃34; 3＆＃34;＆＃34; VIN＆＃34;：＆＃ 34; VIN345343445345＆＃34;＆＃34; ModelGroupId＆＃34;：＆＃34; 10＆＃34;＆＃34;马克＆＃34;：＆＃34; NDE5234＆＃34;}]，＆＃34;绘制＆＃34;：1，＆＃34; recordsTotal＆＃34;：24，＆＃34; recordsFiltered＆＃34;：24}

fnCallback函数无法在DataTable中呈现服务器端数据

1 个答案: