Datatable的分页入门

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

这篇关于Datatable的分页入门的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---