DataTables Initialization on dynamically constructed table

DataTables Initialization on dynamically constructed table

I've an html table dynamically constructed in a php file. The table id is logTable

When the user page is loaded, I use $.getJSON to grab the table and display it on the user page as follows:

  1. $.getJSON("ol_LogTable.php", {filterVal:1}, function(data) {
  2. $('#activityLog').html(data);
  3. var LogClass = $('#logTable').attr('class');
  4. console.log("log Class: " + LogClass);
  5. $('#logTable').dataTable();
  6. });
The console.log is reporting the correct class. So I'm able to successfully use $('#activityLog') to grab appropriate table information.

But the initialization

  1. $('#logTable').dataTable();
Is still not producing anything in the header area.
The initialization does produce the following message if the table has no records:



No data available in table
Showing 0 to 0 of 0 entries
PreviousNext

But the headers are still not capable of sorting, the search input is only visible sporadically, and when it is visible it doesn't work.

Any advice would be appreciated.

Thanks in Advance: Pavilion