Jquery datatables not showing column headings

Question

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?

Answer 1

If you're passing in data in the form of an array of objects, then you'll need to specify the titles of each column manually:

data = this.SearchController.resultSet;
this.$tableContainer.dataTable({
    data:    data,
    columns: [
    {
        data: "H",
        title: "Thickness"
    },
    {
        data: "InstanceId",
        title: "Instance ID"
    }]
});

Note: this will not require you to specify headers in your table element. All you need is an empty <table>, and this will work. Documentation here.