Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。这是中文官网:点击这里
效果图:
当然比如添加功能等功能的图标是用的font-awesome插件,详情请戳官网:
点击这里
这个demo是基于服务器端的,搜索和分页功能也是基于后台返回数据,这里只列出关键代码,具体情况需要根据你的后台代码再调整。
1.jsp页面:表格的css只需要引用就可以了,都是自带的。
<body>
<table id="userTable" class="display" border="1px">
<thead>
<tr>
<th>user_id</th>
<th>user_name</th>
<th>user_gender</th>
<th>user_email</th>
<th>user_phone</th>
<th>user_address</th>
<th>user_birthday</th>
<th>role_name</th>
<th>department_name</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th colspan="9"><a id="addBtn" href="javascript:void(0)"
class="btn btn-mini" title="添加"><i class="fa fa-plus"></i></a> <a
id="editBtn" href="javascript:void(0)" class="btn btn-mini"
title="编辑"><i class="fa fa-edit"></i></a> <a id="deleteBtn"
href="javascript:void(0)" class="btn btn-mini" title="删除"><i
class="fa fa-trash"></i></a> <a id="refreshBtn"
href="javascript:void(0)" class="btn btn-mini" title="刷新"><i
class="fa fa-refresh"></i></a></th>
</tr>
</tfoot>
</table>
2.表格js代码:
render:在列上处理数据的函数,可以再次自定义显示内容。这里将渲染时间,将后台的毫秒数转换成相应日期;根据id映射相应的角色名,部门名。
$(document).ready(function() {
loadUserData();
});
function loadUserData() {
$("#userTable").DataTable({
ajax : {
url : "getUserList.do",
type : "get"
},
columns : [
{"data":"user_id"},
{"data":"user_name"},
{"data":"user_gender"},
{"data":"user_email"},
{"data":"user_phone"},
{"data":"user_address"},
{"data":"user_birthday",
render:function(data,type,full,meta){
return toIsoDateTime(data);
}
},
{"data":"role_id",
render:function(data,type,full,meta){
return toRoleName(data);
} },
{"data":"department_id",
render:function(data,type,full,meta){
return toDepartmentName(data);
} },
],
language:{
"url":"js/zh-CN.txt"
},
ordering:true,
orderMulti:false,
pageLength:3,
pagingType:"full_numbers",
processing:true,
searching:true,
serverSide:true,
order:[[0,"asc"]]
});
}
3.国际化脚本:由于默认语言英语,所以需要转化成汉语
{
"lengthMenu":"每页显示_MENU_条记录",
"info":"当前显示第_START_至_END_条记录(总记录数_TOTAL_条)",
"infoFiltered":"",
"infoEmpty":"总记录数 0",
"search":"搜索",
"processing":"载入中...",
"emptyTable":"无数据",
"paginate":{
"first":"第一页",
"previous":"上一页",
"next":"下一页",
"last":"最后一页"
}
}
4.common.js:用来转换数据,方便前端展示
var toIsoDateTime=function(timeMills){
if(timeMills==0){
return "-";
}
var newDate=new Date(timeMills);
return newDate.toLocaleDateString();
};
var toRoleName = function(data) {
var roleName = new Array("总经理","副总经理","组长","普通员工");
switch(data) {
case 1:return roleName[0];
case 2:return roleName[1];
case 3:return roleName[2];
case 4:return roleName[3];
default:return "";
}
};
var toDepartmentName = function(data) {
var departmentName = new Array("研发部","IT部","HR","销售");
switch(data) {
case 1:return departmentName[0];
case 2:return departmentName[1];
case 3:return departmentName[2];
case 4:return departmentName[3];
default:return "";
}
};
5.controller核心代码:
start:是指数据的当前列表的起始位置,从0开始,本例第一页开始是0,第二页开始是3.
length:是指当前一页展示的数据行数,如本例就是3.
DataTableSearch :自己封装的用来封装查询的数据,包含value和regex。
这里的分页使用pageHelper插件实现,稍后会贴出该插件的使用方法。
pageHelper github地址:点击这里
@RequestMapping(value="/getUserList.do")
@ResponseBody
public HttpEntity<?> getUserList(Integer start, Integer length, DataTableSearch search) {
//得到分页对象
PageInfo<User> users = userService.getAllUserRoleDep(start/length+1, length);
//从分页对象获得所有user list
List<User> userList = users.getList();
//根据用户名模糊查询得到查询后的user list
List<User> usersSearch = userService.getAllUserRoleDepByName(search.getSearch().getValue());
//包装entity对象为DTO对象
List<UserDTO> userDTOs = CommonUtil.UserToDTO(userList);
List<UserDTO> userSearchDTOs = CommonUtil.UserToDTO(usersSearch);
JSONObject jsonObject = new JSONObject();
//搜索时
if ("" != search.getSearch().getValue()) {
jsonObject = CommonUtil.putDataToJson(userSearchDTOs,userSearchDTOs.size(),userSearchDTOs.size());
} else {
jsonObject = CommonUtil.putDataToJson(userDTOs,users.getTotal(),users.getTotal());
}
return new ResponseEntity<Object>(jsonObject.toString(), HttpStatus.OK);
}
6.DataTableSearch查询类:
value:是当前搜索框输入的值。
REGEX :可以使用正则表达式来查询。
public class DataTableSearchMap extends HashMap<String, String> {
private static final long serialVersionUID = -3060397928148553737L;
private static final String VALUE = "value";
private static final String REGEX = "regex";
public DataTableSearchMap() {
put(VALUE, "");
put(REGEX, "");
}
public String getValue() {
return get(VALUE);
}
public String getRegex() {
return get(REGEX);
}
}
具体代码会在demo中贴出来,但是DataTables的服务端用法的关键代码已经贴出来了。