Jquery datatables not showing column headings

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
    }
  ]
});

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.

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
})

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.