Question

我在使用JSON数据填充JQuery DataTable表的Webmethod（c＃）时遇到了一些问题。

Ajax电话：

function loadTable(message) {
            $.ajax({
                type: "POST",
                url: "TestBed.aspx/ValueDateSummary",
                cache: false,
                data: JSON.stringify({ senderBIC: senderBIC }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");

                    alert(err.Message);

                },
                success: function (msg) {

                    var data = msg.d;
                    alert(data["counter"]);
                    alert(data);
                    alert(typeof msg);
                    var otable = $("#test").dataTable({
                       // "sAjaxDataProp": msg.d,
                        "aoColumns": [
                            { "mDataProp": "counter" },
                            { "mDataProp": "SessionID" },
                            { "mDataProp": "MsgType" }
                        ]
                    });
                }
            });
        };

没有错误，但数据表是空的。

以下是警报的结果

alert（data [“counter”]）= UNDEFINED

alert（data）= [{“counter”：3，“SessionID”：“1”，“MsgType”：“103”，“ValueDate”：“2007-08-01”，“发件人”：“1 “}，{”counter“：7，”SessionID“：”2“，”MsgType“：”103“，”ValueDate“：”2009-05-26“，”发件人“：”2“}]

警告（typeof msg）= OBJECT

为什么我的桌子是空的？

*编辑 * 这是工作的最终成功方法

success: function (msg) {
                    var data = JSON.parse(msg.d);

                    $("#test").dataTable({
                        "aaData": data,
                        "aoColumns": [{
                            "mDataProp": "counter"
                        }, {
                            "mDataProp": "SessionID"
                        }, {
                            "mDataProp": "MsgType"
                        }]
                    });
                }

Answer 1

您永远不会设置oTable ...

的数据

你必须给它一个Array of Arrays (var object = [][])：

您可以{/ 3}}执行，并将$ajax代码放入ajax函数

或执行以下操作：（取自fnServerData ）

function loadTable(message) {
    $.ajax({
        type: "POST",
        url: "TestBed.aspx/ValueDateSummary",
        cache: false,
        data: JSON.stringify({
            senderBIC: senderBIC
        }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        error: function (xhr, status, error) {
            var err = eval("(" + xhr.responseText + ")");

            alert(err.Message);
        },
        success: function (msg) {
            var data = [];

            $.map(msg.d, function (item) {
                {
                    var row = [];

                    row.push(
                        item.counter,
                        item.SessionID,
                        item.MsgType
                        //Commented out because you didn't include them in your aoColumns declaration, if you want them in the table to access later just make them non-visible.
                        //item.ValueDate,
                        //item.Sender
                    );
                    data.push(row);
                }
            });

            var otable = $("#test").dataTable({
                "aaData": data,
                "aoColumns": [
                    {"mDataProp": "counter"},
                    {"mDataProp": "SessionID"},
                    {"mDataProp": "MsgType"}
                ]
            });
        }
    });
}

从jQuery DataTables 1.7.2开始，您可以使用example from DataTables，但只能使用array of objects as a data source而且速度稍慢，因为它只是手动将其复制到array or arrays。

Answer 2

尝试将您的成功功能更改为以下内容：

var data = msg.d;
alert(data["counter"]);
alert(data);
alert(typeof msg);

var rows = [];
for (var i = 0; i < data.length; i++) {
    rows.push([
        data[i].counter,
        data[i].SessionID,
        data[i].MsgType,
        data[i].ValueDate,
        data[i].Sender
    ]);
}

var otable = $("#test").dataTable({
    "aaData": rows
});

Ajax webmethod，返回JSOn数据

2 个答案: