datatable 和 ajax，其中 json 数据嵌套很深

编程问答 2022-05-26

问题描述

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

"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" }
    ]
} );

解决方法

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

这需要更改您的 ajax 选项：

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

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

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