在页面有个表格,需要在不同条件下加载不同的数据,并且表格的列也不一样了
这时发现某些情况下会触发报错 Cannot read property ‘style’ of undefined,
有时候也报 Cannot read property ‘mData’ of undefined
不是必现
/**
* 实例化表格
*/
const makeTable = (tableId, columns, tableList) => {
if(msgTableObj) {
msgTableObj.destroy()
$(tableId).empty()
}
msgTableObj = $(tableId).DataTable({
columns: columns,
data: tableList,
pageLength: 10,
destroy: true,
info: false,
searching: false,
order: [[0, 'desc']]
})
$("#in-or-out-msg-modal").modal({
backdrop: 'static',
keyboard: true,
show: true
})
}
场景一展示的表格数据
makeTable(
"#info-msg-table",
[
{data: 'product', title: '产品'},
{data: 'host',title: '机器/服务'},
{data: 'cluster', title: '集群'},
{data: 'detail_url', title: '详情'}
],
result.data
)
场景二展示的表格数据
makeTable(
"#info-msg-table",
[
{data: 'host',title: '机器'},
{data: 'log', title: '日志信息'}
],
result.data
)
stackoverflow上的一个解答,增加table的destroy和empty后就好了,如下
// 这就是增加的代码
let msgTableObj = null
// 这就是增加的代码 end
const makeTable = (tableId, columns, tableList) => {
// 这就是增加的代码
if(msgTableObj) {
msgTableObj.destroy()
$(tableId).empty()
}
// 这就是增加的代码 end
msgTableObj = $(tableId).DataTable({
columns: columns,
data: tableList,
pageLength: 10,
destroy: true,
info: false,
searching: false,
order: [[0, 'desc']]
})
$("#in-or-out-msg-modal").modal({
backdrop: 'static',
keyboard: true,
show: true
})
}