javascript - 在 jQuery 的 DataTables-Table 插件中发布数据

Question

我在谷歌上搜索了几个小时来找到我的问题的解决方案，但直到现在还没有运气......

我正在使用...更正...我想使用 jQuery 数据表插件 ( http://www.datatables.net/ ) 来显示一些数据。

以下步骤已成功实现:

从 *.asmx 服务获取 JSON 数据。我什至检查了它在 http://jsonlint.com/ 上是否有效

{"d":{"key":1,"email":"test@test.ch","language":"de","locked":false}}

出于调试目的，我在代码中添加了 alert() 标记。

 function LoadTable(businessUnitId) {
        $.ajax({
            url: url + "/GetAccounts",
            data: '{businessUnitId:"' + businessUnitId + '"}',
            contentType: "application/json; charset=utf-8",
            type: "POST",
            dataType: "json",
            cache: false,
            success: function(json) {
                for (var i in json.d) { // displays property name and its value --> works
                    alert(i + ": " + json.d[i]);
                }

                $('#tableAccounts').DataTable({
                    data: json.d, // tried json and json.d
                    columns: [
                        { title: "Test1", data: "key" },
                        { title: "Test2", data: "email" },
                        { title: "Test3", data: "locked" },
                        { title: "Test4", data: "language" }
                    ]
                });
            }
        });
    }

问题:我无法发布表中的数据。设置了列标题，但未添加包含 JSON 对象值的行。我认为问题可能是 columns 属性的分配。

非常感谢任何帮助。

TIA，泽维尔

Answer 1

来自the documentation ，datatables 期望选项 data 是二维数组或对象数组。

但是，您传递的是 data: json.d，其中 json.d 是单个 json 对象。由于您想要使用表格，这意味着您希望在某个时刻显示多个项目，因此您的服务返回一组 json 对象是有意义的，如下所示:

{ "d" : [ {"key":1,"email":"test@test.ch","language":"de","locked":false} ] }

如果出于某种原因您只希望从服务返回单个项目，则可以将其转换为单个对象的数组，并以 data: [json.d] 形式传递数据选项.

我创建了this fiddle所以你可以尝试一下。