Vue+DataTableswarning:tableid=xxxxCannotreinitializeDataTable.报错解决方法

问题描述&＃xff1a;

使用DataTables来写列表&＃xff0c;用vue来渲染数据&＃xff0c;有搜索功能&＃xff0c;每次点击搜索就会报错&＃xff0c;如下图所示。

问题排查&＃xff1a;

找了一系列原因&＃xff0c;最后发现是我每次请求完数据之后都会添加分页功能&＃xff0c;从而导致了table重复创建了。

解决方法&＃xff1a;

再请求完数据之后&＃xff0c;渲染数据之前&＃xff0c;先将表格销毁&＃xff0c;然后再重新渲染生成。

if ($(&＃39;#table2_demo1&＃39;).hasClass(&＃39;dataTable&＃39;)) {var table &＃61; $(&＃39;#table2_demo1&＃39;).dataTable();table.fnDestroy(); //还原初始化了的datatable
}