Как обновить заголовки столбцов DataTable

Question

Я динамически создаю свою таблицу datatable и HTML. Он работает эффективно, пока столбец не будет таким же. Но он не обновляется должным образом после изменения столбцов no.of.

Первый раз, в No.of столбцах три, он создает таблицу три столбца на tblActivitySummary, но когда я вновь призываю LoadGrid с новыми данными в object.ActivitySummary, который имеет две колонки, не обновляет столбцы вместо этого создать новый Datatable с заголовки столбцов из предыдущей таблицы три колонки с ошибкой в ​​консоли:

не удается прочитать свойство «sWidth» неопределенных

Я пытался уничтожить таблицу, но не обновляет:

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

Вот Аякса

$.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); 
}); 

Вот как я создаю 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 
    }); 
} 

Создание HTML таблицы

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); 
} 

Хотя он обновляет данные в нем, но он не обновляет заголовки столбцов. Почему бы не очистить предыдущие столбцы данных? Это происходит потому, что я создаю разные столбцы на одной таблице? Пожалуйста, помогите

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 
    }); 
} 

У меня нет вашей библиотеки javascript для данных, поэтому я не мог попробовать код, но надеюсь, что это поможет. Вы добавляете теги заголовков, поэтому вам нужно очистить innerHTML таблицы, после чего можно снова создать таблицу. Также, если у вас нет экземпляра datatable, вы создаете datatable $ (tableId) .DataTable(), а затем пытаетесь удалить datatable с функцией remove. Вам не нужно воссоздавать и уничтожать данные. Если у вас есть экземпляр dataTable, например «var _dtInstance = $ (tableId) .DataTable()», вы можете удалить его с помощью _dtInstance.destroy();