DataTables销毁对象并重新加载数据

    在使用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); //将‘画’出来的表头塞到表格里
}