jquery表格插件Datatables使用以及重新初始化等常见问题

1、Datatables基本使用
下载并引入文件：js 和css文件 和 jQuery 1.7或更高版本
其中：js和css文件可以在官网http://datatables.club/中下载，jQuery可以在https://code.jquery.com/中下载

<link rel="stylesheet" href="DataTables-1.10.21/jquery.dataTables.min.css">
<script src="DataTables-1.10.21/jquery.dataTables.min.js">script>
<script src="jquery.min.js">script>

以Datatables的例子来说明，html代码为：

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1th>
            <th>Column 2th>
        tr>
    thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1td>
            <td>Row 1 Data 2td>
        tr>
        <tr>
            <td>Row 2 Data 1td>
            <td>Row 2 Data 2td>
        tr>
    tbody>
table>

初始化数据表：

$(document).ready( function () {
    $('#table_id').DataTable();
} );

运行之后的效果：

2、Datatables优化
1）适应屏幕大小，需要在td中加属性：style=“width:100%”；显示单元格边界，需要在td中加class属性值：cell-border

<table id="table_id" class='display cell-border' style="width:100%">
		    <thead>
		        <tr>
		            <th>Column 1th>
		            <th>Column 2th>
		        tr>
		    thead>
		    <tbody>
		        <tr>
		            <td>Row 1 Data 1td>
		            <td>Row 1 Data 2td>
		        tr>
		        <tr>
		            <td>Row 2 Data 1td>
		            <td>Row 2 Data 2td>
		        tr>
		    tbody>
table>

2）页数用中文显示，需要加入js代码：

$(document).ready(function() {
	$('#table_id').DataTable({
		"scrollX": true,
		"language": {
			"lengthMenu": "每页 _MENU_ 条记录",
			"zeroRecords": "没有找到记录",
			"info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
			"infoEmpty": "无记录",
			"infoFiltered": "(从 _MAX_ 条记录过滤)"
		}
	});
});

3）展示效果

3、遇到的问题
1）一些加密的数据不能错行显示，直接在一行上展示，导致数据过长，展示效果不好
解决方法：在每行展示数据中td标签中加入如下style样式

<td style='word-wrap:break-word; white-space: normal; word-break: break-all'>

也可以直接写在css文件中，

html:
<td class='table_element'>
css:
.table_element {
	style: 'word-wrap:break-word; white-space: normal; word-break: break-all';
}

2）多次查询数据，展示查询列表，每次查询的数据不一样，展示的列也不一样。第二次查询与第一次查询数据量和页数也不一样，但是展示的总数不变，主要是因为datatable不允许多次初始化。 – 参考：https://www.cnblogs.com/linus-tan/p/12254776.html
解决办法：

if ($('#table_data').hasClass('dataTable')) {
			var oldTable = $('#table_data').dataTable();
			oldTable.fnClearTable(); //清空一下table
			oldTable.fnDestroy(); //还原初始化了的dataTable
			$('#table_data').empty();
		}