Table not being filled from Ajax Call using Datatables plug-in for jQuery

Question

The ajax request is returning the following data

    [{"ID":40,"Date":"\/Date(1407999600000)\/"},{"ID":39,"Date":"\/Date(1409036400000)\/"}

The HTML is:

<table id="bookings-table" class="display">
<thead>
    <tr>
        <th>ID</th>
        <th>Date</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th>ID</th>
        <th>Date</th>
    </tr>
</tfoot>
</table>

And the javascript is

$(document).ready(function () {
    $('#bookings-table').dataTable({
        "ajaxSource": "/manager/Booking/GetBookings",
        "columns": [
        { "data": "ID" },
        { "data": "Date" }
        ]
    });
});

Any idea why the table is not being filled

Answer 1

Just looking at their docs , I believe your json has to be formatted as so.

{
    "data": [
        {
            "ID": 40,
            "Date": "\/Date(1407999600000)\/"
        },
        {
            "ID": 39,
            "Date": "\/Date(1409036400000)\/"
        }
    ]
}

Answer 2

Javascript error

    $('#bookings-table').dataTable({
        "ajax": {
            "url": "/manager/Booking/GetBookings",
            "dataSrc": ""
        },

Sorted it all columns now bind