我正在尝试从我的webapi返回的以下json数据构建数据表:
{
"body": {
"recording": [],
"alarm": [{
"device_id": "someID",
"device_name": " ",
"channel_id": "1",
"start_time": "2016-08-21T16:15:57+03:00",
"timestamp": 1471785357,
"end_time": "2016-08-21T16:16:07+03:00",
"storage_key": "some string",
"duration": 10,
"expiration_time": 1474416000,
"file_name": "file name4",
"size": 703504,
"group_id": "some guid",
"event_type": "m",
"local_ttl": 2278752,
"thumbnail": null
}, {
"device_id": "someID",
"device_name": " ",
"channel_id": "1",
"start_time": "2016-08-21T16:15:57+03:00",
"timestamp": 1471785357,
"end_time": "2016-08-21T16:16:07+03:00",
"storage_key": "some string",
"duration": 10,
"expiration_time": 1474416000,
"file_name": "file name4",
"size": 703504,
"group_id": "some guid",
"event_type": "m",
"local_ttl": 2278752,
"thumbnail": null
}],
"guard_tour": [],
"continuous_event": []
},
"header": {
"request_id": "some id",
"response_status": "OK",
"message": "endpoint succeeded"
}
}
我正在构建我的数据表:
$("#alarmTable").DataTable({
ajax: {
url: 'myurl',
dataSrc: 'body.alarm'
}
});
我收到以下错误:数据表请求第0行第0列的未知参数0
也许更有经验的眼睛可以节省我几个小时的搜索来解决这个问题
编辑:我的HTML
<table id="alarmTable" class="table table-striped">
<thead>
<tr>
<th>Device ID</th>
<th>Device Name</th>
<th>Channel Id</th>
<th>Start Time</th>
<th>End Time</th>
<th>Duration</th>
<th>File Name</th>
<th>size</th>
<th>Event Type</th>
</tr>
</thead>
<tbody></tbody>
</table>
另外,我的网络api是一个代理,所以我无法真正改变我的json格式
答案 0 :(得分:3)
您的JSON设置是正确的,除非您尝试在标记中定义列,您应该在columns
部分中执行此操作:
var table = $('#alarmTable').DataTable({
ajax: {
url: 'yoururl',
dataSrc: 'body.alarm'
},
columns : [
{ data: 'device_id', title: 'Device Name' },
{ data: 'channel_id', title: 'Channel Id' },
{ data: 'start_time', title: 'Start Time' },
{ data: 'end_time', title: 'End Time' },
{ data: 'duration', title: 'Duration' },
//and so on, you get the picture
]
})
然后标记可以缩小为
<table id="alarmTable" class="table table-striped"></table>
演示 - &gt;的 http://jsfiddle.net/1ay7nfhk/ 强>