数据表和 ajax，其中 json 数据是深度嵌套的

Question

如何配置数据表以正确呈现此数据。

"date": "2021-02-08",
"title": "Venues",
"data": {
    "monitor": [
        {
            "Venue": "Headlands Hotel Austinmer Beach",
            "Address": "Headland Ave and Yuruga Street, Austimer, NSW 2515",
            "Suburb": "Austinmer",
            "Date": "Tuesday 2 February 2021",
            "Time": "1pm to 3pm"
        },
        {
            "Venue": "Bulli Beach Café ",
            "Address": "68 Trinity Row, Bulli, NSW 2516",
            "Suburb": "Bulli",
            "Date": "Saturday 6 February 2021",
            "Time": "1:30pm to 4pm"
        },

这是我目前正在使用但不起作用的方法。

$('#locations').DataTable( {
    "ajax": url,
    "columns": [
        { "monitor": "Suburb" },
        { "monitor": "Venue" },
        { "monitor": "Address" }
    ]
} );

Answer 1

使用 dataSrc 选项指示 DataTables 您的数据数组在 JSON 响应结构中的位置。这是 DataTables 开始逐行迭代的地方。

这需要更改您的 ajax 选项：

"ajax": {
  "url": "your URL here",
  "dataSrc": "data.monitor"
}

现在您可以使用 data 选项引用列定义中的相关字段：

"columns": [
  { "data": "Suburb" },
  { "data": "Venue" },
  { "data": "Address" }
]

数据表和 ajax，其中 json 数据是深度嵌套的

datatable and ajax where the json data is deeply nested

html

javascript

datatable

datatables