[英]JSON array Tabulator js table
我的HTML
文件中有一个Tabulator
数据表。 看起来像这样:
<div class="example-table">/div>
我有一个JavaScript
文件,该文件将通过调用返回JSON
的rest API
来用数据填充表。
这是我的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"}
]}
制表器表将显示,但没有任何数据。 如果检查我的JS日志,则可以看到请求完成而没有任何错误,并且可以在响应中看到JSON。
您能帮我怎么做?
谢谢!
您的代码中存在三个主要错误。
首先 ,您的JSON响应,该响应应如制表js 文档所示:
//An array of objects not wrapped in an object
[
{"firstname":"Piter","pred":"0,616540492"},
{"firstname":"Parker","pred":"0,42325456"}
]
其次 ,columns字段应与每一行匹配:
$(".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
方法,您可以使用unshift
或push
将数据前置或追加到array 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.