问题加载 JSON 对象到数据表 Jquery

Question

我正在使用 DataTables 和 Jquery，我有一个 JSON 对象数据源，我想通过 Ajax 获取并显示在 table .

JSON数据从/live/logurl返回，格式如下：

{
    "Logs": [
        {
            "date": "2015-04-22T14:00:39.086Z",
            "eventType": "event1",
            "str": "Application startup"
        },
        {
            "date": "2015-04-22T14:01:27.839Z",
            "eventType": "event2",
            "str": "test Logged in"
        }
    ]
}

我的 Table HTML :

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Date</th>
      <th>Event</th>
      <th>Description</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <th>Date</th>
      <th>Event</th>
      <th>Description</th>
    </tr>
  </tfoot>
</table>

最后是获取和填充数据的 JStable :

$(document).ready(function() {
  $('#example').dataTable( {
    "ajax": "/live/log",
    "columns": [
        {"data": "date"},
        {"data": "eventType"},
        {"data": "str"}
      ]

  });
});

我可以通过调试器看到 JSON 数据正在正确获取。

我似乎在与 JSON 数据相关的 datatables js 中遇到错误。

Value aData in fnInitalise is null - Uncaught TypeError: Cannot read property 'length' of undefined。 Datatable 卡住说 "Loading..."

我确定这可能是由于我的 JSON 数据格式问题。谁能指出我正确的方向？

Answer 1

您应该访问 data 中的 Log 对象，因为它是 column 在构造您的 table 时将循环遍历的数组。该插件的工作原理是假设您的数组名称称为 data，即：

{
    "data": [
        // Array of objects
    ]
}

但是因为你在你的情况下使用 Log:

{
    "Logs": [
        // Array of objects
    ]
}

...您需要手动指定 dataSrc 属性（因为您使用的是 custom data property）：

$(document).ready(function() {
  $('#example').dataTable( {
    "ajax": {
        "url": "/live/log",
        "dataSrc": "Logs"
    },
    "columns": [
        {"data": "date"},
        {"data": "eventType"},
        {"data": "str"}
      ]

  });
});

问题加载 JSON 对象到数据表 Jquery

Issue loading JSON Object into Datatable Jquery

javascript

ajax

datatable

jquery

json