具有对象和数组 JSON 的数据表答案

【问题标题】：Datatables with JSON of object and arrays具有对象和数组 JSON 的数据表
【发布时间】：2019-01-07 00:09:45
【问题描述】：

我对数据表以及如何表示 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]
]
}]
}]
}

但在桌子上我什么都没有。

【问题讨论】：

请用英文发布您所有的错误信息。
您好，我没有错误，但表格没有显示任何内容。问题在于如何引用数据，我是这样做的，但我认为这不是正确的方法。列：[ {data：'time'}，{data：'hostname'}，{data：'cpu'}，{data：'mem'}，{data：'load'}，{data：'disk'} ],

标签： javascript arrays json datatables

【解决方案1】：

这是一个完整的工作示例： 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 链接）

【讨论】：