Datatables uninformative

Question

I am trying to build datatables from the following json data returned by my webapi:

{
    "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"
    }
}

I am building my datatable like so:

$("#alarmTable").DataTable({
   ajax: {
     url: 'myurl',
     dataSrc: 'body.alarm'
   }
});

I'm getting the following error: datatables requested unknown parameter 0 for row 0 column 0

maybe a bit more experienced eye will save me a few hours in search to solve this problem

edit: my 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>

Also, my web api is mearly a proxy so I can't really change the format of my json

Check this link, might be it's helpful for you :- stackoverflow.com/questions/7640204/…. your json structure is also weird!! recheck it — Nalin Aggarwal

davidkonrad davidkonrad · Accepted Answer · 2016-08-26T03:47:03

Your JSON setup is right except you are trying to define the columns in the markup, you should do it in the columns section :

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

And then the markup could be reduced to

<table id="alarmTable" class="table table-striped"></table>

demo -> http://jsfiddle.net/1ay7nfhk/

Datatables uninformative

1 Answers