javascript - 具有对象和数组 JSON 的数据表
问题描述
我对数据表以及如何表示 JSON 非常陌生,所以我求助于那些知道的人的经验。
我有一个以 JSON 格式返回数据的服务器,我想在包含这些列的表中显示它们:
<td>Time</td>
<td>hostname</td>
<td>cpu</td>
<td>mem</td>
<td>load</td>
<td>disk</td>
所以我调用 JSON 响应:
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": {
"url": "http://les000/query?db=tele&q=SELECT LAST(cpu_used) AS cpu, LAST(mem_used) AS mem, LAST(load) AS load, LAST(disk_await) AS disk_await FROM custom GROUP BY hostname ORDER BY time",
"dataType": "json",
"cache": false,
"contentType": "application/json; charset=utf-8"
deferRender: true,
columns: [
{data: 'time' },
{ data: 'hostname' },
{ data: 'cpu' },
{ data: 'mem' },
{ data: 'load' },
{ data: 'disk' }
],
rowId: 'extn',
select: true,
dom: 'Bfrtip',
buttons: [
{
text: 'Reload table',
action: function () {
table.ajax.reload();
}
}
]
} );
} );
我得到以下答案:
宠物方法:GET
Código de estado:HTTP/1.1 200 OK
这是我得到的 JSON:
{
"results": [{
"statement_id": 0,
"series": [{
"name": "custom",
"tags": {
"hostname": "LINUX2345"
},
"columns": ["time", "cpu", "mem", "load", "disk_await"],
"values": [
["1970-01-01T00:00:00Z", 1, 78, 0, 0]
]
}, {
"name": "custom",
"tags": {
"hostname": "LINUX344334"
},
"columns": ["time", "cpu", "mem", "load", "disk_await"],
"values": [
["1970-01-01T00:00:00Z", 9, 49, 1, 0]
]
}]
}]
}
但在桌子上我什么都没有。
解决方案
这是一个完整的工作示例:HTML
<div class="container">
<div class="panel">
<button id="loadData" class="btn btn-default">Load Data</button>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Occupation</th>
<th>Email Address</th>
</tr>
</thead>
</table>
</div>
</div>
JS:
$(function() {
$("#example").DataTable();
// Premade test data, you can also use your own
var testDataUrl = "https://raw.githubusercontent.com/chennighan/RapidlyPrototypeJavaScript/master/lesson4/data.json"
$("#loadData").click(function() {
loadData();
});
function loadData() {
$.ajax({
type: 'GET',
url: testDataUrl,
contentType: "text/plain",
dataType: 'json',
success: function (data) {
myJsonData = data;
populateDataTable(myJsonData);
},
error: function (e) {
console.log("There was an error with your request...");
console.log("error: " + JSON.stringify(e));
}
});
}
// populate the data table with JSON data
function populateDataTable(data) {
console.log("populating data table...");
// clear the table before populating it with more data
$("#example").DataTable().clear();
var length = Object.keys(data.customers).length;
for(var i = 1; i < length+1; i++) {
var customer = data.customers['customer'+i];
// You could also use an ajax property on the data table initialization
$('#example').dataTable().fnAddData( [
customer.first_name,
customer.last_name,
customer.occupation,
customer.email_address
]);
}
}
})();
**注意:您需要包含 Jquery 和数据表脚本(即来自 CDN 链接)
推荐阅读
- angular - 嵌套的可观察对象,其中来自第一个可观察对象的响应被传递给第二个,并且两个响应都在最终订阅中使用
- python - 当我尝试保存文件时 Python win32com SaveAs2 错误
- javascript - 有没有办法获取 @pixi/app (和其他 pixi 模块)的类型
- android - 应用程序崩溃(未连接适配器;跳过布局)(Kotlin)
- javascript - 使用 EPSG:25832 投影在 Leaflet 中垂直对齐 TMS 瓷砖
- python - 如何让用户配置文件详细信息在 django 中正常工作
- java - Java - 打印 n 次包含在对象 ArrayList 中的字符串
- apache-spark - BROADCASTJOIN 提示在 PySpark SQL 中不起作用
- python - 为什么函数不适用于数据框?系列对象没有称为查询的属性(熊猫)
- uber-api - uber cadence :: 想要在工作流中存储一个对象