Question

我正在动态创建我的数据表和HTML表。它的工作完全正常，直到列不相同。但是，一旦no.of列发生变化，它就无法正确更新。

第一次，no.of列是三，它在tblActivitySummary上创建了三个列表但是当我再次使用LoadGrid中有两列的新数据调用object.ActivitySummary时，它不更新列而是使用前一个三列表中的列标题创建一个新的Datatable，并在控制台中显示错误：

无法读取未定义的属性's width'

我试图破坏表，但它没有更新：

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

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

以下是我创建 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，然后您可以再次创建表。此外，如果您没有数据表实例，则创建数据表$（tableId）.DataTable（）然后尝试使用remove函数删除数据表。您不需要重新创建和销毁数据表。如果你有一个dataTable实例，比如＆＃34; var _dtInstance = $（tableId）.DataTable（）＆＃34;，你可以用_dtInstance.destroy（）;

删除

Answer 2

即使使用 $（'＃example'）。html（“”）标头仍会出现，因此我也不得不使用 $（'＃example thead'）删除该部分。 .html（“”）现在可以正常工作了。

$('#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
        });

    });

});

如何刷新DataTable列标题

2 个答案: