在使用DataTables的过程中,我遇到了这样一个需求:
在页面加载时会去加载一些数据,当点击查询按钮时去加载另外一些数据;这两次加载的数据形成表格时的表头是不同的,而且是什么样的表头是不可知的。
开始时我尝试使用destroy方法和clear方法去销毁表格,但事实证明这种方法是行不通的,会报一个“Uncaught TypeError: Cannot read property ‘style’ of undefined”的错误,而表格同样没有被销毁掉。
从网上查了很多解决方法,但是很遗憾,都没有解决我遇到的问题。
最后查到了在DataTables创建表格对象时,会创建两个对象:一个是数据对象;一个是DOM对象。
DataTables的destroy方法只是销毁了数据对象,而没有将DOM对象销毁,所以在第二次加载数据时列的数量与表头中列的数量无法对应,就会报出上边遇到的错误。
这种情况就需要将数据对象和DOM对象都销毁掉。可以使用DataTables提供的destroy方法将数据对象销毁,然后使用JQuery的empty方法将表头销毁。在第二次加载时将表头‘画’出来。
HTML代码
<table class="table" cellspacing="0" width="100%" id="infoTable">
<thead>
<tr id="infos"></tr>
</thead>
</table>
渲染表格
table.tb = $('#dbinforTable').dataTable({
ajax: {
url: '查询数据的地址',
type: 'post',
dataType: 'json',
data: function (d) {
d.token = $("#token").val();
},
},
buttons: [],
language: webCommon.dataTableLang, //提示信息
bLengthChange: false,
bInfo: false, //开关,是否显示表格的一些信息表格下面哪一行
retrieve: true,
select: true,//需要Select-1.3.0支持
columnDefs: [],
searching: false, //隐藏搜索
stripeClasses: ["odd", "even"], //为奇偶行加上样式,兼容不支持CSS伪类的场合
processing: true, //隐藏加载提示,自行处理
serverSide: false, //启用服务器端分页
destroy: true,
orderMulti: false, //启用多列排序
order: [], //取消默认排序查询,否则复选框一列会出现小箭头
ordering: false,//关闭排序
paging: true,//开启分页
pageLength: 10,//每页显示10条
pagingType: "simple_numbers", //分页样式:simple,simple_numbers,full,full_numbers,
fnRowCallback: function (nRow, aData, iDataIndex) {
return nRow;
},
dom: '<"html5buttons"B>lTfgitp',
columns: arralist, //自己拼装的数据
});
JS代码
if(table.tb!=null) {
var int_table1=$('#infoTable').DataTable();
int_table1.destroy(); //销毁数据对象
$('#infoTable').empty(); //清空表格的表头
var table = "<thead>\n" +
"<tr id=\"infos\"></tr>\n" +
"</thead>"; //‘画’一个表头
$('#infoTable').append(table); //将‘画’出来的表头塞到表格里
}