Datatables destroy function error

Question

I'm using datatables.js for creating a report table. In my report page there are some filters. When apply any of filters my service returns data that has different column count. Because of this I'm destroying and recreating table. But an error occurs like 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()));         

    }

Answer 1

instead you please try this...

$('#example').DataTable( { destroy: true, // all the other stuff you want to perform } );

Answer 2

I ran into the same issue - the intent was the same as the columns are dynamic.

I finally had to use the following code:

let table = $("#table-id").DataTable();
table.clear();
table.destroy();

// Once you know the columns, recreate by calling DataTable initializer
// Another important part - I do remove and recreate <th> based on received columns
// or we get a weird 'style' error because of mismatch between data and table columns.

The table.clear() call was the missing piece - without it, the existing HTML was not being removed. Passing destroy: true within DataTable constructor was useless and table.destroy did the trick.