官网:
英文:https://datatables.net/
中文:http://www.datatables.club/
引入文件(结合bootstrap样式):
css:
<link href="statics/css/dataTable/dataTables.bootstrap.min.css" type="text/css" rel="stylesheet">
js:
<script src="statics/js/dataTable/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="statics/js/dataTable/dataTables.bootstrap.min.js" type="text/javascript"></script>
用法:
HTML(以本人项目为例):
<table class="table table-bordered table-hover table-striped" id="dutyListTable">
<thead>
<tr>
<th>选择</th>
<th>实际值班人</th>
<th>值班日期</th>
<th>班次类别</th>
</tr>
</thead>
<tbody id="rewardBody">
</tbody>
</table>
JS(相关配置项):
var dutyTable = $("#dutyListTable").dataTable({
"destroy" : true, //销毁表格对象
"aLengthMenu":[5,10], //用户可自选每页展示数量 5条或10条
"searching":false,//禁用搜索(搜索框)
"lengthChange":true,
"paging": true,//开启表格分页
"bProcessing" : true,
"bServerSide" : true,
"bAutoWidth" : false,
// "sort" : "position",
"deferRender":true,//延迟渲染
// "bStateSave" : false, //在第三页刷新页面,会自动到第一页
// "retrieve" : true, //类似单例模式,重复利用以存在对象。
"iDisplayLength" : 5,
"iDisplayStart" : 0,
"select": {
style: 'os',
selector: 'td:first-child'
},
"ordering": false,//全局禁用排序
"ajax": { //ajax方式向后台发送请求
"type": "POST",
"url":"mvc/onDuty/find-user-duty",
"data":{dutyUserId:uid},//传递的数据
"dataType" : "json"
},
"columns" : [//对接收到的json格式数据进行处理,data为json中对应的key
{"data":"id"},
{"data" : "actualDutyUser.realName"} ,
{"data" : "onDutyDate"},
{"data": "categoryKey.typeName.keyValue"},
],
//渲染
"columnDefs": [
{
"render": function ( data, type, row ) {
return "<input type='radio' name='onDutyToId' value='" + data + "'>";
},
"targets": 0 //指定渲染列:第一列(渲染第一列为单选框,data自动匹配为 {"data":"id"}中数据)
},
],
"oLanguage" : { // 国际化配置
"sProcessing" : "正在获取数据,请稍后...",
"sLengthMenu" : "显示 _MENU_ 条",
"sZeroRecords" : "没有找到数据",
"sInfo" : "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条",
"sInfoEmpty" : "记录数为0",
"sInfoFiltered" : "(全部记录数 _MAX_ 条)",
"sInfoPostFix" : "",
"sSearch" : "查询",
"sUrl" : "",
"oPaginate" : {
"sFirst" : "第一页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "最后一页"
}
},
// initComplete:initComplete,
});
// dutyTable.fnDraw();//重绘
后台控制层:
/**
* @(dataTable格式)
* @param:[onDuty, sEcho, start:开始索引数, length:每页显示数量]
* @return:java.util.Map<java.lang.String,java.lang.Object>
*/
@RequestMapping(value="find-user-duty",method=RequestMethod.POST)
@ResponseBody
public Map<String,Object> getClassesTeacher(AlertOnDuty onDuty,@RequestParam(value = "sEcho",required = false)Integer sEcho, @RequestParam("start")Integer start,@RequestParam("length")Integer length) {
this.map = new HashMap<String, Object>();
//获取分页控件的信息
this.pageBean = this.getBaseAllService().getOnDutyService().getManOnDutyList(onDuty,start,length);
map.put("aaData", pageBean.getResult());
//页数信息配置
map.put("sEcho", sEcho);
map.put("iTotalRecords", pageBean.getTotalRow());
map.put("iTotalDisplayRecords",pageBean.getTotalRow());
return map;
}
其中:start:开始索引数, length:每页显示数量。sEcho记不清了,可有可无。
start和length都是向后台发送请求时自带的参数。
aaData为dataTable接收数据的变量名称,是dataTable默认的。
效果:
本文只是从实际项目入手讲解,不够系统全面,如想更好使用DataTables建议参考官方文档。