0

Tabulator我的文件中有一个数据表HTML。看起来像这样：

<div class="example-table">/div>

我有一个JavaScript文件，它会通过调用一个API返回的JSON.

这是我的JS文件的样子：

$(document).ready(function() {

    $(".example-table").tabulator({
        columns : [ {
            title : "ID",
            field : "myjson.firstname",
            width : 250
        }, {
            title : "Pred",
            field : "myjson.pred",
            sorter : "number",
            align : "left",
            formatter : "progress",
            width : 200
        }, ],
    });

    var tabledata = [];

    $.getJSON('http://127.0.0.1:7001/MySerices/service/rest', function(json) {
        tabledata.append(json);
    });

    $(".example-table").tabulator("setData", tabledata);

});

REST 服务返回的JSON内容如下所示：

{"myjson":
[{"firstname":"Piter","pred":"0,616540492"},
{"firstname":"Piter","pred":"0,616540492"}
]}

Tabulator 表出现，但没有任何数据。如果我检查我的 JS 日志，我可以看到请求已完成且没有任何错误，并且我可以在我的响应中看到 JSON。

你能帮我怎么做吗？

谢谢！

4

1 回答 1

3

您的代码中有三个主要错误。

首先，您的 JSON 响应，响应应如 tabulator js文档所示：

//An array of objects not wrapped in an object
[
   {"firstname":"Piter","pred":"0,616540492"},
   {"firstname":"Parker","pred":"0,42325456"}
]

其次，列字段应匹配每一行：

$(".example-table").tabulator({
    columns : [ {
        title : "ID",
        field : "firstname",//changed here
        width : 250
    }, {
        title : "Pred",
        field : "pred",//and here
        sorter : "number",
        align : "left",
        formatter : "progress",
        width : 200
    }, ],
});

第三，getJSON是异步的，所以只有在数据到达时才需要获取和设置数据response：

$.getJSON('http://127.0.0.1:7001/MySerices/service/rest', function(response) {
    //response is already a parsed JSON
    $(".example-table").tabulator("setData", response);

});

PS：数组没有这个append方法，你可以使用unshiftorpush将数据添加到数组中。

于 2017-11-21T19:08:10.313 回答