当然比如添加功能等功能的图标是用的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); } }
一、前台页面的配置
DataTables几乎可以在不改变前台代码部分即可实现前台分页到后台分页的转换，唯一需要做的就是在代码中开启DataTables后台分页功能即可：
"serverSide" : true,// 服务器端分页处理至此完成了前台页面的配置（就是这么简单，最主要的是后台处理逻辑的改变）
二、后台处理逻辑的改变
要想使用后台分页，必须在后台使用服务器端语言处理过滤数据，然后将数据按照DataTables的要求返回到前台即可（具体要求见下文）
DataTable提供了一个用来统一处理数据的类ssp.class.php，借用此类可以更加方便的实现后台逻辑部分
三、DataTables参数信息
以下翻译仅供参考，如有错误请指正
开启后台分页后向后台发送的参数以及需要返回的数据要求如下：
-
发送的参数：
当通过服务器端处理一个请求时，DataTables将发送如下数据给服务器端让其知道它所需要的数据
| 参数名称 | 参数类型 | 参数说明 |
|---|---|---|
draw | integer | 请求序号。由于Ajax请求是异步的，和返回的参数draw一起用来确定序号 |
start | integer | 当前从第几页开始（默认第一页为'0'） |
length | integer | 当前页所需要的数据条数（值为'-1'时代表返回所有的数据） |
search[value] | string | 全局搜索的值（将应用在每一个设置为可搜索的列中） |
search[regex] | boolean | 全局搜索是否启用正则表达式 |
order[i][column] | integer | 排序将会应用到第i列 |
order[i][dir] | string | 当前列的排序方向（asc=>正序，desc=>逆序） |
columns[i][data] | string | 当前列数据源 |
columns[i][name] | string | 当前列名称 |
columns[i][searchable] | boolean | 当前列是否可搜索 |
columns[i][orderable] |
| |
columns[i][search][value] | string | 当前列搜索的值 |
columns[i][search][regex] | boolean | 当前列搜索是否启用正则表达式 |
-
需要返回的参数：
DataTables需要以JSON的形式返回如下信息
| 参数名称 | 参数类型 | 参数说明 |
|---|---|---|
draw | integer | 请求序号（DataTables强烈建议将此参数强制转换为int型，以阻止可能的XSS攻击） |
recordsTotal | integer | 过滤之前的总数据量 |
recordsFiltered | integer | 过滤之后的总数据量 |
data | array | 需要在表格中显示的数据 |
error | string | 错误信息，可选参数 |
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
