Error while configuring datatable with json

Question

I have a table as follow

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
    <tr>
        <th>Month</th>
        <th>ID</th>
        <th>Comments</th>
        <th>Details</th>
    </tr>
</thead>
<tbody>
</tbody>
</table>

My json is

[{
"Month": "Jan-2013",
"ID": "asdfa0",
"Comments": "",
"Details": "bla bla blba blablabalbal"
}]

and my script is

$(document).ready(function () {
var oTable = $('#example').dataTable({
    "bProcessing": true,
    "sAjaxSource": "Script/ahd.json",
    "aoColumns": [
    { "mData": "Month" },
    { "mData": "ID" },
    { "mData": "Comments" },
    { "mData": "Details" }
    ]
});
});

After doing so i am getting the following error

Uncaught TypeError: Cannot read property 'length' of undefined jquery.dataTables.js:2649

After little googling i got 1 solution to wrap the json in

{
  aaData: 
  [{
"Month": "Jan-2013",
"ID": "asdfa0",
"Comments": "",
"Details": "bla bla blba blablabalbal"
}]
}

this is also not working...what is wrong here

Answer 1

reading the documentation

your js must be

$(document).ready(function() {
                $('#example').dataTable( {
                    "bProcessing": true,
                    "bServerSide": true,
                    "sAjaxSource": "Script/ahd.json",
                    "sServerMethod": "POST"
                } );
            } );

and the json format must be like this

{
  "sEcho": 3,
  "iTotalRecords": 6,
  "iTotalDisplayRecords": 3,
  "aaData": [
    [
      "A","B","C"
    ],
    [
       "A","B","C"
    ],
    [
        "A","B","C"
    ],
    [
        "A","B","C"
    ],
    [
       "A","B","C"
    ],
    [
       "A","B","C"
    ],
   ]

}