Datatable的分页入门

源码请见1.Datatable的分页入门

一、 目标

使用mybatis获取数据库中的数据，使用datatable对页面进行分页展示。

二、 使用到的资源

1. datatable的资源包（如我用的DataTables-1.10.15.zip）。（下载地址datatable中文地址 OR datatable offical site）

三、 项目结构

webapp下的extensions和media目录是拷贝的datatables资源中的2个目录。

四、 项目部分代码说明

4.1 使用README.sql创建数据库

#create a database
create database UserCenter;
#create a table
use UserCenter;
create table user(
    id int primary key auto_increment,
    name varchar(50),
    passwd varchar(50),
    age int
);
#add much data
insert into user(name,passwd,age) value('hash','1234',21);
insert into user(name,passwd,age) value('maven','1234',11);
insert into user(name,passwd,age) value('memorylorry','1234',22);
insert into user(name,passwd,age) value('lucy','1234',41);
insert into user(name,passwd,age) value('duck','1234',11);
insert into user(name,passwd,age) value('salary','1234',13);
insert into user(name,passwd,age) value('monkey','1234',51);
insert into user(name,passwd,age) value('dog','1234',22);
insert into user(name,passwd,age) value('march','1234',51);
insert into user(name,passwd,age) value('benz','1234',21);
insert into user(name,passwd,age) value('cookie','1234',12);
insert into user(name,passwd,age) value('fun','1234',55);

4.2 前台要装载datatable

通过columns数组选择要加载的列名；通过设置processing、serverSide、ajax三个参数加载数据。

$('#example').DataTable({
    columns : [ {
            "sWidth" : "100px",
            bSearchable : false,
            bSortable : false,
            data : 'id'
        }, {
            "sWidth" : "100px",
            bSearchable : true,
            bSortable : false,
            data : 'name'
        }, {
            "sWidth" : "100px",
            bSearchable : false,
            bSortable : false,
            data : 'passwd'
        }, {
            "sWidth" : "100px",
            bSearchable : false,
            bSortable : false,
            data : 'age'
        } ],
        "processing" : true,
        "serverSide" : true,
        "ajax" : "../getUserContentByMyself"
    });

这个ajax提出的请求时，会使用GET方式向服务器发送一些参数，如下所示，尤其是两个加黑的参数，表示页索引和页大小：

http://localhost:8080/DatatableTest/getUserContentByMyself
?draw=1&columns[0][data]=id&columns[0][name]=&columns[0][searchable]=false
&columns[0][orderable]=false&columns[0][search][value]=&columns[0][search][regex]=false
&columns[1][data]=name&columns[1][name]=&columns[1][searchable]=true
&columns[1][orderable]=false&columns[1][search][value]=&columns[1][search][regex]=false
&columns[2][data]=passwd&columns[2][name]=&columns[2][searchable]=false
&columns[2][orderable]=false&columns[2][search][value]=&columns[2][search][regex]=false
&columns[3][data]=age&columns[3][name]=&columns[3][searchable]=false
&columns[3][orderable]=false&columns[3][search][value]=&columns[3][search][regex]=false
&order[0][column]=0&order[0][dir]=asc&start=0&length=10&search[value]=
&search[regex]=false&_=1497077565075

4.3 后台获取数据

控制器要做这些事：

@Controller
public class GetUserByMyself {
    @Autowired
    @Qualifier("getUserPaginationService")
    private GetUserPaginationService getUserPaginationService;

    // 返回列表的内容
    @RequestMapping("getUserContentByMyself")
    @ResponseBody
    public Object getUserContent(HttpServletRequest request) {
        //获取页索引和页大小
        int start = Integer.parseInt(request.getParameter("start"));
        int len = Integer.parseInt(request.getParameter("length"));

        Map<String, String> params = new HashMap<String, String>();
        //根据页索引和页大小查询数据
        Map<String, Object> result = getUserPaginationService.getDetails(params, start, len);
        //返回数据
        return JSONArray.toJSON(result);
    }
}

DAO的实现方法：

public class GetUserPaginationDAO extends SqlSessionDaoSupport {

    // 获取分页的总数
    public Integer getUserSize(Map<String, String> params) {
        String statementCount = "cn.dectfix.dto.UserMapper.getUserSize";
        Integer totalSize = this.getSqlSession().selectOne(statementCount,params);
        if (totalSize != null)
            return totalSize;
        return 0;
    }

    // 获取分页的内容
    public Map<String, Object> getUserContent(Integer totalSize,Map<String, String> params,Integer skipResults, Integer rows) {
        Map<String, Object> resMap = new HashMap<String, Object>();
        String statementDetail = "cn.dectfix.dto.UserMapper.getUserContent";
        //装入要返回前台datatables的参数
        resMap.put("data",this.getSqlSession().selectList(statementDetail, params, new RowBounds(skipResults, rows)));
        resMap.put("recordsTotal", totalSize);
        resMap.put("recordsFiltered", totalSize);
        return resMap;
    }

}

代码中通过selectList(statement,params,RowBounds)进行限定数据库查询的范围；
为了满足datatables控件的需求，需要向前台返回data、recordsFiltered、recordsTotal等参数。为什么呢？可以查看datatable实例返回ajax请求的内容格式，它也是带有这些参数的！

4.4 总结

这样就完成了基础的datatables的初始化，可能你还需要修改语言风格，搜索框的功能，或则是列排序的功能等，可以留意留意官网的做法。