jquery - 数据表信息不丰富

Question

我正在尝试从我的 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>

此外，我的 Web api 只是一个代理，因此我无法真正更改 json 的格式

Answer 1

您的 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>

演示 -> http://jsfiddle.net/1ay7nfhk/