Datatables 基于Java的服务器模式

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

Datatables 基于Java的服务器模式

猜你喜欢