jQuery DataTable动态列重载时出现Uncaught TypeError无法读取style属性错误

报错根因 #

DataTable的destroy()方法默认仅销毁组件的JS实例、解绑事件，不会清除表格已经渲染生成的<thead>、<tbody>等DOM结构。
首次加载当日数据时，表格生成了对应列数的DOM结构，切换到昨日24列数据后，新的列配置数量大于旧DOM残留的列数，DataTable初始化时试图为超出旧列数的新列设置样式属性，找不到对应的DOM节点就抛出了读取style属性的报错。

解决方案 #

销毁旧实例后手动清空表格的全部DOM内容，彻底清除残留的旧列结构即可，修改代码如下：

if ($.fn.DataTable.isDataTable(tblTxn)) {
    tblTxn.destroy();
    // 新增这行，清空表格内所有残留的旧DOM结构
    $('#txnTable').empty();
}

tblTxn = $('#txnTable').DataTable({
    destroy: true,
    data: [tblData],
    columns: columnNames
});

可选优化点 #

• 代码中jResult、tblTxn变量未显式声明，会默认挂载为全局变量，建议补充var/let声明避免变量污染。
• 若需要更好的加载性能，也可以直接使用DataTable的clear() + rows.add() + columns.adjust() API动态更新数据和列，不需要每次销毁重建实例。

内容的提问来源于stack exchange，提问作者NoBullMan