Utilizing datatables.js to generate a report table on my page with filters. However, when applying any of the filters, the data returned has varying column counts which prompts me to destroy and recreate the table. Unfortunately, an error message pops up saying "Unable to get property 'style' of undefined or null reference."
var htmlTable = "<table class='display responsive no-wrap cell-border compact' style='margin: 0 !important' width='100%' id='policyTable'>" +
"<thead>" +
"<tr class='cell-border custom-header-footer tableHeaders' id='tableHeaders'>" +
"<th>Policy Details</th>" +
"</tr>" +
"</thead>" +
"</table>";
function InitAndLoadTableData(tableData, tableId, exportTitle) {
if ($.fn.DataTable.fnIsDataTable("#" + tableId)) {
var oldTable = $("#" + tableId).DataTable();
oldTable.destroy(true);
$("#divFor_" + tableId).append(htmlTable);
}
var table = $('#' + tableId)
.DataTable({
data: tableData,
dom: "<'row' <'col-md-12'B>><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"searching": false,
"paging": false,
"info": false,
"ordering": false,
//destroy: true,
responsive: true,
processing: false,
columns: tableColumns,
buttons: [
{ extend: 'copy', className: 'btn red btn-outline', title: exportTitle },
{ extend: 'pdf', className: 'btn green btn-outline', title: exportTitle },
{ extend: 'excel', className: 'btn yellow btn-outline', title: exportTitle },
{ extend: 'csv', className: 'btn purple btn-outline', title: exportTitle }
]
});
table.buttons().container().appendTo($('.col-md-12:eq(0)', table.table().container()));
}