datatable的简单使用
1、引入datatable的样式及js,因为datatable是基于jquery的所以需要先引入jquery
2、<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="${path}/media/css/jquery.dataTables.css">
引入table的样式文件,可以直接下载放在本项目中也可以直接引用外部css
3、首先引入jquery,然后引入需要使用的js文件,顺序不可以颠倒
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="${path}/media/js/jquery.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="${path}/media/js/jquery.dataTables.js"></script>
1、所有的样式及js就这么多,datatable是先加载内容后渲染的,所以现在需要创建table。
2、<table id="table1" class="display">
<thead>
<tr>
<th>序号</th>
<th>名称</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
</tr>
</tbody>
</table>
3、<!--第三步:初始化Datatables-->
$(document).ready( function () {
$('#table1').DataTable();
} );
4、DataTable中处理数据有两种,逻辑分页及物理分页,在数据量确定不会增长且数量小于10k的时候可以使用逻辑分页,及一次性将数据加载,使用浏览器分页,反之则考虑使用物理分页;