Question

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

property

以下是我传入的数据样本数据：property：

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

...和columns属性，其中3列与数据匹配：

[[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]]

这很好，并创建一个有效的数据表。但是，当尝试将此表重新绑定到具有多于3列的数据时 - 很多次我收到错误：

“无法读取未定义的属性'样式'

即使我首先使用：

完全刷新数据表

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

CodePen示例： Dynamic columns using DataTables

Answer 1

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

所以这里有两个问题：

第二次调用createDataTable()函数时，$("#vehiclesTable")选择器匹配相同的DOM对象，但其内容已被第一个 DataTable 实例化更改，并且我不知道＃39;知道怎么做，但 DataTable 很可能以某种方式使用原始容器内容（或者它可能只是丢弃它，但是你用h <填充它在你的html中em> thead 和 tbody 节点，确切地说，不是第二个实例化将找到的节点。
正如我所说，你在同一个DOM（还有DataTable-enhanced / messed）对象上再次实例化 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()函数时，都会丢弃所有旧东西，不会产生任何副作用。

动态地向数据表添加列会抛出“无法读取未定义的属性'样式”

1 个答案: