数据表没有信息

时间:2016-08-25 15:18:00

标签: jquery datatables

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

1 个答案:

答案 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/