1

我在使用 JSON 数据填充 JQuery DataTable 表时遇到一些问题。

阿贾克斯调用：

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":3,"SessionID":"1","MsgType":"103","ValueDate":"2007-08-01","Sender":"1"}, {"counter":7,"SessionID":"2","MsgType":"103","ValueDate":"2009-05-26","Sender":"2"}]

警报（类型消息）=对象

任何想法为什么我的桌子是空的？

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

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

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

2 回答 2

1

您永远不会设置oTable...的数据

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

您可以将其作为ajax执行并将您的$ajax代码放入fnServerData函数中

或执行以下操作：（取自DataTables 的示例）

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您可以使用对象数组作为数据源，但只能使用ajax 源 (sAjaxSource)，而且速度稍慢，因为它只是手动将其复制到array or arrays.

于 2013-08-01T14:15:28.127 回答
0

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

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
});
于 2013-08-01T14:11:27.420 回答