CODEWITHSUNDEEP
javascriptjqueryjsondatatable
andrsnn
andrsnn

Reputation: 1621

jquery datatables contains blank table headers

I am attempting to use the jquery datatables plugin to populate a html table via a JSON object returned from a PHP script. I have a bit of confusion concerning naming of the json object and options in the datatables plugin. Passing back a json object like so:

echo json_encode(array('data'=>$res));

yields:

Uncaught TypeError: Cannot read property 'length' of undefined

while changing data to aaData successfully populates the table, however without headers.

Several fourm posts mentioned the json object must be returned as aaData, but the datatables example documentation on their website gives an example json object named with data.

Here is my current client side code, I am relatively certain that my server side is correct.

$('document').ready(function(){
    $('#result').dataTable({
        "ajax": {
            'url' : 'ppmAlarms.php',

        },

        "columns": [
            { "data": "location" },
            {"data" : "descAndType" },
            {"data" : "timestamp"}
        ]
    });

    });

JSON structure is as follows:

{
  "aaData": [
    {
      "location": "loc1",
      "descAndType": "desc1",
      "timestamp": "2014-08-20 11:34:10"
    }
]
}

Upvotes: 1

Views: 1462

Answers (1)

andrsnn
andrsnn

Reputation: 1621

Just realized I just have to specify my own column headers in thead, they aren't populated:

<thead>
      <tr>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Extn.</th>
         <th>Start date</th>
         <th>Salary</th>
     </tr>
</thead>

Upvotes: 2

Related Questions