Jquery datatables not showing column headings

datatables, jquery

Solution

Try to change your `<table>` element like this:

<table id=report>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
</table>

That way the headers are created. If you click view source on the example page you will see the same implementation.

Problem

I am following the example here. Using an array containing object. I create my array in a for loop like this ``` historyArray[i] = { "User": strUserName, "Timestamp" : date.toString(), "Latitude" : point.lat, "Longitude" : point.lng }; ``` My datatable implementation: ``` $(document).ready(function() { $('#dynamic').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="report"></table>'); $('#report').dataTable({ "aaData": historyArray, "aoColumns": [ { "mDataProp": "User" }, { "mDataProp": "Timestamp" }, { "mDataProp": "Latitude" }, { "mDataProp": "Longitude" } ], "bJQueryUI": true, "sPaginationType": "full_numbers", "sDom": '<"H"Tfr>t<"F"ip>', "oTableTools": { "sSwfPath": "swf/copy_csv_xls_pdf.swf", "aButtons": ["copy", "csv", "xls", "pdf"] } }); }); ``` I am getting the data correctly but with no column headings, am i missing something?

Original source