How to refresh DataTable column headers

Question

I'm dynamically creating my datatable and HTML table. It works perefectly fine until the column no is same. But it doesn't update properly once the no.of columns changes.

First time, the no.of columns is three, it creates three column table on tblActivitySummary but when I call LoadGrid again with new data in object.ActivitySummary which has two columns, it doesn't update columns instead create a new Datatable with column headers from previous three-column table with an error in console:

Cannot read property 'sWidth' of undefined

I tried to destroy table but it doesn't update:

$('#tblActivitySummary').DataTable().destroy();
$('#tblActivitySummary').dataTable().fnClearTable();
$('#tblActivitySummary').empty();

Here is the ajax

$.ajax({
    data: JSON.stringify(data),
    url: urlGetRGUStatusReportData,
    type: 'POST',
    contentType: "application/json; charset=utf-8",
    success: function (obj) {
        var object = jQuery.parseJSON(obj.data);
        LoadGrid("#tblActivitySummary", object.ActivitySummary, object.ColumnNamesActivitySummary, false);
});

Here is how I'm creating DataTable:

function LoadGrid(tableId, gridData, displayColumnNames, IsSearchable) {
    var columnKeys = [];

    for (var k in gridData[0]) {
        columnKeys.push({ "data": k });
    }

    CreateHTMLTable(tableId, displayColumnNames); //Create table dynamically

    $(tableId).DataTable().destroy();
    $(tableId).dataTable().fnClearTable();
    $(tableId).empty();
    $(tableId).dataTable({
        "searching": IsSearchable,
        "bDestroy": true,
        "scrollY": 450,
        "scrollX": true,
        data: gridData,
        columns: columnKeys
    });
}

Creating HTML table

function CreateHTMLTable(tableId, displayColumnNames) {
    var columnNames = [];
    for (var k in displayColumnNames[0]) {
        columnNames.push(k);
    }
    var $toAttach = $("<thead><tr></tr></thead>");

    for (var i = 0; i < columnNames.length; i++) {
        var $thead = $("<th></th>");
        $thead.text(columnNames[i]);
        $toAttach.find("tr").append($thead);
    }
    $(tableId).append($toAttach);
}

Though it updates the data in it but the it doesn't update the column headers. Why wouldn't it clear previous datatable columns? Is this happening because I'm creating different columns on same table? Please help

Answer 1

function LoadGrid(tableId, gridData, displayColumnNames, IsSearchable) {
    var columnKeys = [];

    for (var k in gridData[0]) {
        columnKeys.push({ "data": k });
    }

    //$(tableId).DataTable().destroy();
    //$(tableId).dataTable().fnClearTable();
    //$(tableId).empty();

    $(tableId).html("");
    CreateHTMLTable(tableId, displayColumnNames); //Create table dynamically


    $(tableId).dataTable({
        "searching": IsSearchable,
        "bDestroy": true,
        "scrollY": 450,
        "scrollX": true,
        data: gridData,
        columns: columnKeys
    });
}

I don't have your datatable javascript library so i couldn't try the code but I hope it helps. You are appending header tags so you have to clear innerHTML of table then you can create table again. Also if you don't have instance of datatable you are creating a datatable $(tableId).DataTable() then try to remove datatable with remove function. You don't need to recreate and destroy datatable. If you have an instance of dataTable like "var _dtInstance = $(tableId).DataTable()", you can remove with _dtInstance.destroy();

Answer 2

Even using $('#example').html("") headers still appear, so I also forced to delete the the section using $('#example thead').html("") now it works fine.

$('#example thead').html("");
$('#example').html("");
$(document).ready(function() {
    $.getJSON('./your_call', function(data) {
        var dataObject = {
            columns: data.columns,
            data: data.data
        };

        table = $('#example').dataTable({
            "destroy": true,
            "data": dataObject.data,
            "columns": dataObject.columns
        });

    });

});