DataTables用Ajax加载动态表格

需要引入以下文件

<script src="<%=request.getContextPath()%>/static/js/plugins/dataTables/datatables.min.js"></script>

可能还需要jQuery的文件，不过我工程引入的东西太多了，如果不能正常显示表格请自行引入其他需要的文件

 <table class="table table-bordered jambo_table bulk_action table-striped table-hover"
       id="dataList">//样式一定要写上
    <thead>
    <tr class="headings">
	    <th>
	    <th width="10%" >法规文件名称</th>
	    <th width="10%">关键字</th>
	    <th width="20%">颁布机构</th>
	    <th width="10%">颁布日期</th>
	    <th width="10%">文档附件</th>
	    <th width="10%">发布状态</th>
	    <th width="10%">审核状态</th>
	    <th width="10%">操作</th>
	    <th width="10%">功能</th>  
    </tr>
    </thead>
    <tbody>//Ajax请求的json格式数据填充
    </tbody>
</table>

<thead></thead>标签是DataTables的头部，<tbody></tbody>是数据，这里用Ajax请求的json格式数据填充，所以空着不写。

接下来初始化DataTable

$('#dataList').DataTable( {
		"autoWidth": false,//当重复刷新表格时，我的页面会出现变形的，现象，加了这个就好了
	"serverSide": true,
	"ajax": {
		url:  CONST_URL.LIST ,//请求的url
		method: "POST",
		data: {//请求的参数
			lareName: $('#lareName').val(),
			keyWord: $('#keyWord').val(),
			issUnitName: $('#issUnitName').val(),
			repStat: $('#repStat').val(),
			veriStat: $('#veriStat').val(),
			startDate: $('#startDate').val(),
			endDate: $('#endDate').val(),
		},
	},
	"columnDefs": [//对table格式的定义（表格的列从0开始）
		       {
			   "targets": 0,//这一列是id，但是不想再前端显示，"visible": false,表示隐藏
			   "visible": false,
			},
			   targets: 8,//根据样式fa-pencil-square，把第8列显示为一个图标的样式
			   render: function (data, type,row) {
					   return '<i class="fa fa-pencil-square text-navy fa-lg " guid="'+row.guid+'"></i>  '+
					  '<i class="fa fa-trash text-danger fa-lg " guid="'+row.guid+'"></i>';
			   }                       
		       },
		       {
			   targets: 9,//把第九列的样式改为超链接
			   render: function (data, type,row) {
					   return '<a href="">审核</a>';
			   }                       
		       }
	],  
	"columns": [//返回的json数据在这里填充，注意一定要与上面的<th>数量对应，否则排版出现扭曲
	    {"data": "guid"},
	    { "data": "lareName" },
	    { "data": "keyWord" },
	    { "data": "issUnitName" },
	    { "data": "releTime" },
	    { "data": "lareType" },
	    { "data": "repStat" },
	    { "data": "veriStat" }
	]
    } );