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

Below will create headers dynamically

$('#dtableid').DataTable({
  "aaData": [
    {
      "abc": "123",
      "xyz": 456
    },
     {
      "abc": "123",
      "xyz": 456
    }
  ],
  "aoColumns": [
    {
      "mData": "abc",
      "title": "ABC",
      "bSortable": true
    },
    {
      "mData": "xyz",
      "title": "XYZ",
      "bSortable": true
    }
  ]
});

Answer 2

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.

Answer 3

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.

Answer 4

If your passing in a data array and your table element is hidden at the time that you initialize your datatable then all of the thead/tfoot elements, and every child element, gets a height:0px inline style added to them.

Make sure to show() the table element right before initializing your datatable unless you want to go back after and change all the height styles of all the elements.

// unhide your table
$('#dtableid').show();

// initialize your datatable
$('#dtableid').DataTable({ 
   data: data,
   // .. other init options
})

Answer 5

we can also print the datatable column header like this :

"columns": [
    {
        "data": "Sno", "name": "Sno", "autoWidth": true,"title":"S.No"
    }
    ,
    {
        "data": "Result", "name": "Result", "autoWidth": true, "title": "Result",  render: function (data1, type, full, meta) {
            if (full.Count > 0) {
                return '<a style="color:blue" href="#" class="point"  onclick="ApprovalBreakUp(this)" value="' + data1 + '">' + data1 + '</a>'
            }
            else {
                return '<label>' + data1 + '</label>'
            }
        }

    }
    ,
    {
        "data": "Count", "name": "Count", "autoWidth": true, "title": "Count"
    }