javascript - 动态添加列到数据表会抛出 "Cannot read property ' style' of undefined”

Question

我有一个使用 jQuery DataTables 创建的数据表，使用动态列数创建:

            this.vehiclesDataTable = $("#vehiclesTable").DataTable({
            destroy: true,
            "dom": '<"top">rt<"bottom"lp>i<"clear">',
            responsive: true,
            data: data,
            columns: this.dynamicColumns
        });

这是我为 data:property 传入的示例数据:

[[0,"2016-05-01",0],[0,"2016-06-01",0],[0,"2016-07-01",0],[0,"2016-08-01",1],
[0,"2016-09-01",1],[0,"2016-10-01",0],[0,"2016-11-01",0],[0,"2016-12-01",0],
[0,"2017-01-01",0],[0,"2017-02-01",0],[0,"2017-03-01",0],[0,"2017-04-01",0],
[0,"2017-05-01",0]]

...以及 columns 属性，其中 3 列与数据匹配:

[{"className":"details-control","sTitle":" ", 
"orderable":false,"data":null,"defaultContent":""," sWidth":"2%", 
"name":"expandCollapseRow"}, {"title":"Date"," sWidth":"100px"},
{"title":"testworks","sWidth":"30px","sClass":"dataTableAlignRight"}]

这工作正常并创建一个有效的数据表。但是，当尝试将此表重新绑定(bind)到具有超过 3 列的数据时 - 很多时候我都会收到错误:

"Cannot read property 'style' of undefined"

即使我首先使用以下方法完全刷新数据表:

        vehiclesDataTable.clear();
        $('#vehiclesTable').empty();

CodePen 示例: Dynamic columns using DataTables

Answer 1

查看 your example ，我看到您正在通过已经实例化的 jQuery/DOM 对象重新实例化插件。

所以这里有两个问题:

1. 第二次调用 createDataTable() 函数时，$("#vehiclesTable") 选择器匹配相同的 DOM 对象，但其内容已被更改第一个 DataTable 实例化，我不知道如何，但 DataTable 很可能以某种方式使用原始容器内容(或者可能只是删除它，但你是使用 thead 和 tbody 节点在 html 中填充它，这绝对不是第二个实例化会找到的内容。

2. 正如我所说，您正在通过相同的 DOM(但由 DataTable 增强/困惑)对象再次实例化DataTable。所以事情肯定会出错......

我不知道DataTables插件是否有API功能来改变其内容(和标题配置等...)，这就是我认为你的试图实现。但在first glance我不这么认为(如果有的话，它可能比简单地删除该表并用新的表替换它更复杂。

因此，最好的解决方案可能是简单地删除现有表并(正如您实际上所做的那样)从头开始再次实例化 DataTables 插件但在新创建的新鲜 DOM 上对象。

那就是(稍微简化一下......)替换:

vehiclesDataTable = $("#vehiclesTable").DataTable(...);

由

vehiclesDataTable = $("<table></table>"); // Insert here thead and tbody if really necessary.
$("#vehiclesTable").replaceWith(vehiclesDataTable);
vehiclesDataTable.attr("id", "vehiclesTable"); // (Added after replacement to avoid two elements having same id)
vehiclesDataTable.DataTable(...);

这样，每次调用 createDataTable() 函数时，所有旧内容都会被丢弃，并且不会发生副作用。