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 databasecreate database UserCenter;#create a tableuse UserCenter;create table user(    id int primary key auto_increment,    name varchar(50),    passwd varchar(50),    age int);#add much datainsert 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 后台获取数据

控制器要做这些事：

@Controllerpublic 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的初始化，可能你还需要修改语言风格，搜索框的功能，或则是列排序的功能等，可以留意留意官网的做法。