Create filter row in header column after table is dynamically created

Gfloridafan93

I am trying to create a separate row in the header to contain a text box to allow users to filter data in the table. I am wanting to do this in the initComplete() function because the number of <th> columns is unknown because the columns are dynamically created when initializing the datatable. Here is my code so far:

table= $('#table').DataTable({
"autoWidth": false,
"destroy": true,
"cache": true,
"scrollX": true,
"columns": cols,
'initComplete': function () {
var colNum = $("#table").dataTable().fnSettings().aoColumns.length; // get the number of cols
var tableHeaderRow = $('tr', table.table().header());
tableHeaderRow.append('<tr id="filterrow">');
for (var i = 0; i < colNum; i++) {
tableHeaderRow.append('<th></th>);
}
tableHeaderRow.append('</tr');
$('#table thead tr#filterrow th').each( function () {
$(this).html( '<input type="text" onclick="stopPropagation(event);" placeholder="Search" />' );
} );
$("#table thead input").on( 'keyup change', function () {
table
.column( $(this).parent().index()+':visible' )
.search( this.value )
.draw();
});
}
});

This doesn't seem to do anything. Any ideas on what I'm doing wrong? Any help would be greatly appreciated.