将JSON对象加载到Datatable Jquery中出现问题

Question

我将使用DataTables和Jquery，我有一个JSON对象数据源，希望通过Ajax获取并在表格中显示。

JSON数据从/live/log的URL返回，并格式如下：

{
    "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"
        }
    ]
}

我的表格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>

最后，获取和填充数据表的JavaScript代码如下：

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

  });
});

我可以通过调试器看到JSON数据被正确获取。但是我似乎在datatables js中遇到了与JSON数据相关的错误。fnInitalise中的aData值为null - 报错信息为Uncaught TypeError：无法读取未定义属性'length'。Datatable卡在"加载中..."的状态。我相信这可能是由于我的JSON数据格式出现问题。有人能指点我正确的方向吗？

- CarlM

---

试试下面的JS代码，然后告诉我：http://pastebin.com/zMcaayV8。 - Muggles

嗨，Muggles，谢谢，我刚试了一下建议，但是没有改变，还是同样的错误 :( - CarlM

也许你需要一个数组JSON而不是只有一个键的对象。 - jcubic

Answer 1

您应该访问data中的Log对象，因为它是在构建表格时column将循环遍历的数组。该插件默认假设您的数组名称为data，例如：

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

但是由于您在这种情况下使用了Log：

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

如果你使用了自定义数据属性，那么你需要手动指定dataSrc属性：

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

  });
});

- Terry