Datatables 基于Java的服务器模式

来源：互联网发布：勇进软件编辑：程序博客网时间：2024/05/18 09:38

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的服务端用法的关键代码已经贴出来了。

0 0