一、首先需要引入datatable的css样式文件和引入jquery.js和datatable的js文件(datatable时基于jquery实现的,所以需要引入jquery.js)
datatable相关文件可以到到官网下载:http://www.datatables.club/
二、html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Datatable的初步使用</title>
<!-- 引入datatable的css样式文件 -->
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/views/admin/css/jquery.dataTables.css">
<!-- 引入jquery.js和datatable的js文件-->
<script type="text/javascript" src="${pageContext.request.contextPath}/views/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/views/admin/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/views/admin/js/myDatatable.js"></script>
</head>
<body>
<table id="myDatatable" style='margin-bottom:0;text-align: center'>
<thead>
<tr>
<th><input type="checkbox" id="checkAll" name="checkAll" /></th>
<th>
ID
</th>
<th>
用户名
</th>
<th>
用户头像
</th>
<th>
联系电话
</th>
<th>
邮箱
</th>
<th>
创建时间
</th>
<th>
状态
</th>
<th>
操作
</th>
</tr>
</thead>
<!-- 假数据-->
<tbody>
<tr>
<td>
<input type="checkbox" id="checkAll" name="checkAll"/>
</td>
<td>1</td>
<td>小明</td>
<td><img src="/booking/views/admin/images/userIcon/04444a10-854d-4110-8a37-078bdbd41354.jpg" width="50px" height="50px"></td>
<td>1311214545</td>
<td>1311214545@qq.com</td>
<td>2019/02/45 12:40:07</td>
<td>有效</td>
<td>doSomething</td>
</tr>
<tr>
<td>
<input type="checkbox" id="checkAll" name="checkAll"/>
</td>
<td>1</td>
<td>小明</td>
<td><img src="/booking/views/admin/images/userIcon/04444a10-854d-4110-8a37-078bdbd41354.jpg" width="50px" height="50px"></td>
<td>1311214545</td>
<td>1311214545@qq.com</td>
<td>2019/02/45 12:40:07</td>
<td>有效</td>
<td>doSomething</td>
</tr>
<tr>
<td>
<input type="checkbox" id="checkAll" name="checkAll"/>
</td>
<td>3</td>
<td>小明</td>
<td><img src="/booking/views/admin/images/userIcon/04444a10-854d-4110-8a37-078bdbd41354.jpg" width="50px" height="50px"></td>
<td>1311214545</td>
<td>1311214545@qq.com</td>
<td>2019/02/45 12:40:07</td>
<td>有效</td>
<td>doSomething</td>
</tr>
<tr>
<td>
<input type="checkbox" id="checkAll" name="checkAll"/>
</td>
<td>3</td>
<td>小明</td>
<td><img src="/booking/views/admin/images/userIcon/04444a10-854d-4110-8a37-078bdbd41354.jpg" width="50px" height="50px"></td>
<td>1311214545</td>
<td>1311214545@qq.com</td>
<td>2019/02/45 12:40:07</td>
<td>有效</td>
<td>doSomething</td>
</tr>
</tbody>
</table>
</body>
</html>
三、实现Datatable的myDatatable.js文件,然后引入到html代码中(上面我已经引入:myDatatable.js)
$(function(){
/**
* DataTable属性配置以及生成datatable
*/
$('#myDatatable').DataTable({
"processing": true,//数据加载时显示进度条
"searching": true,//启用搜索功能
"serverSide": false,//启用本地分页(使用Ajax服务端进行分页需要设置未true)
"info":true, //分页信息提示等等
"paging": true,//是否分页
"pagingType": "full_numbers",//分页时会有首页,尾页,上一页和下一页四个按钮,加上数字按钮
"bLengthChange": true, //开关,是否显示每页显示多少条数据的下拉框
"aLengthMenu": [[2, 3, 5], [2, 3, 5]],//设置每页显示数据条数的下拉选项
'iDisplayLength': 2, //每页初始显示5条记录
"bSort": false, //是否可排序
//"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] }],//进制某列排序
// "aaSorting": [[1, "asc"]],//指定某列按照什么规则排序
"oLanguage":{ //将datatable的英语信息转换未中文
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": " 首页 ",
"sPrevious": " 上一页 ",
"sNext": " 下一页 ",
"sLast": " 末页 "
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
})
四、来一张效果图