datatables后台分页 springMVC+MyBatis PageHelper分页

前言：
1、datatables分页和查询数据库的分页是独立的，互不影响，简单的说，你后台代码怎么分页，datatables是不关心的。
2、datatables说，分页的时候，你点击任何分页属性，比如首页，上一页，下一页或者是页码，我都给你传递一些数据到后台，
你后台接收到数据之后就不归我管了，但是，你给我返回的数据里面，我必须要得到某些数据，只要你给我的这些数据准确，我生成的分页就是准确的，
剩下的事情都不需要你来操心。
3、PageHelper说，分页的时候，我只需要知道你要查询数据的当前页码和你每页要展示的数据条数，剩下的都交给我，也不需要帮你来操心。

OK，既然2个家伙都说了，什么也不需要我们操心，那我们关心的问题就很少了：

datatables给后台传了什么数据，我们怎么去接收？

接收了之后怎么处理一下给PageHelper？

需要我们做的事情：按照我自己的思路，想到什么说什么，一些注意的地方也会在说的时候提到。


1、怎么设置datatables开启后台分页？


设置几个属性即可，主要是前2个设置为true
serverSide : true,//开启服务器模式:启用服务器分页
paging : true,//是否分页
pagingType : "full_numbers",//除首页、上一页、下一页、末页四个按钮还有页数按钮


2、datatables给后台传递了什么东西？


这里先提醒一下，1.9x和之后的1.10及以后的版本，参数的命名是有区别的。可别被网上的老资料给误导了我，要注意自己的版本。
我这里是按照1.10.0配置的。


datatables的属性，没有比其自身的API更权威的了。
参考：服务器处理(Server-side processing)部分


http://datatables.club/manual/server-side.html


API说，DT会给后台传递很多数据，但是我们比较关心的有：
draw,start,length,search.就这几个。


3、datatables要得到什么数据才会分页？
同上，看API，必要参数，就是必须要有的是：


draw,recordsTotal,recordsFiltered,data.
说明下：


draw ：传给你的是什么，你返回的就是什么
recordsTotal ：总条数
recordsFiltered ：过滤后的总数（这个我没弄明白是做什么的，我返回的也是接收到的，原封返回去。有知道的可以留言告诉下）
data ：数据。（这里需要注意下，data这个命名是默认的，咱们封装数据的时候，是可以修改的，这时候就需要配置属性 dataSrc : "list",//这个参数是自己封装的json里面的key）




4、后台怎么接收？

用request直接获取：最好是封装下

//开始的数据行数String start = request.getParameter("start");//每页的数据数String length = request.getParameter("length");//DT传递的draw:String draw = request.getParameter("draw");

5、返回给datatables，我这里返回的是JSON数据

片段：

//封装数据给DataTablesdataTable.setDraw(dataTable.getDraw());dataTable.setData(pageInfo.getList());  dataTable.setRecordsTotal((int)pageInfo.getTotal());  dataTable.setRecordsFiltered(dataTable.getRecordsTotal()); //返回数据到页面JSONObject jsonObject = JSONObject.fromObject(dataTable);

6、PageHelper说，你都提到了后台分页，怎么也得说下我吧！？


快给我当前页码和每页数据，我来给你查询数据


要的是页码，好吧，计算给你：
上面不是获取了start和length，计算一下
//计算页码
this.page_num = (Integer.parseInt(start) / Integer.parseInt(length)) + 1;
ok，把页码和length传给PageHelper，分页完成。

以上是描述，有不对的地方还请指正。下面是代码：

datatables：

//初始化表格var oTable = $("#data_table").DataTable({ajax : {url : "你自己的url",type:"POST",//dataSrc : "list",//这个参数是自己封装的json里面的keydata : {//args1: "我是固定传参的值，在服务器接收参数[args1]"}}, serverSide : true,//开启服务器模式:启用服务器分页lengthChange : false,//是否允许用户改变表格每页显示的记录数ordering : false,//是否允许用户排序paging : true,//是否分页pagingType : "full_numbers",//除首页、上一页、下一页、末页四个按钮还有页数按钮processing : true,//是否显示处理状态/* scrollX: true,//允许水平滚动scrollY: "200px",scrollCollapse: true, */searching : false,//是否开始本地搜索stateSave : false,//刷新时是否保存状态autoWidth : true,//自动计算宽度//deferRender : true,//延迟渲染columns : [ {data : "id"},//后面的省略......

Controller：处理了一下代码，参考看看就行

//使用DataTables的属性接收分页数据DataTablePageUtil<你自己的Bean类> dataTable = new DataTablePageUtil<你自己的Bean类>(request);//开始分页：PageHelper会处理接下来的第一个查询PageHelper.startPage(dataTable.getPage_num(),dataTable.getPage_size());//还是使用List，方便后期用到List<你自己的Bean类> xxBeanList = xxService.queryXxiList(你自己的Bean类);//用PageInfo对结果进行包装 PageInfo<你自己的Bean类> pageInfo = new PageInfo<你自己的Bean类>(xxBeanList);//封装数据给DataTablesdataTable.setDraw(dataTable.getDraw());dataTable.setData(pageInfo.getList());  dataTable.setRecordsTotal((int)pageInfo.getTotal());  dataTable.setRecordsFiltered(dataTable.getRecordsTotal()); //返回数据到页面JSONObject jsonObject = JSONObject.fromObject(dataTable);

注：PageHelper还有一种分页，是用PageInfo<T>接收返回，贴下代码参考

XxServiceImpl:

PageInfo<你的Bean> xxBeanPageInfo = null;//传入你自己的参数xxBeanPageInfo = PageHelper.startPage(当前页码, 每页数据数).doSelectPageInfo(new ISelect() {public void doSelect() {//查询数据xxDao.queryXxList(参数);}});

DataTablePageUtil:这个基本是完整的代码，

2个默认值自己设置：

PAGE_NUM = 1;

PAGE_SIZE = 10;

public class DataTablePageUtil<T> {/*------------------DT自动请求的参数(Sent parameters) begin--------------------*//* * 绘制计数器。这个是用来确保Ajax从服务器返回的是对应的（Ajax是异步的，因此返回的顺序是不确定的）。 要求在服务器接收到此参数后再返回 */private int draw; // 第几次请求/* * 第一条数据的起始位置，比如0代表第一条数据 */private int start = ISystemConstants.PAGE_START;// 起止位置/* * 告诉服务器每页显示的条数，这个数字会等于返回的 data集合的记录数，可能会大于因为服务器可能没有那么多数据。 * 这个也可能是-1，代表需要返回全部数据(尽管这个和服务器处理的理念有点违背) */private int length = ISystemConstants.PAGE_LENGTH; // 数据长度/* * 全局的搜索条件，条件会应用到每一列（ searchable需要设置为 true ） */private String search;/* * 如果为 true代表全局搜索的值是作为正则表达式处理，为 false则不是。 * 注意：通常在服务器模式下对于大数据不执行这样的正则表达式，但这都是自己决定的 */private boolean is_search;/* * 告诉后台那些列是需要排序的。 i是一个数组索引，对应的是 columns配置的数组，从0开始 */private int[] order;/* * 告诉后台列排序的方式， desc 降序 asc升序 */private String order_dir;/* * columns 绑定的数据源，由 columns.dataOption 定义。 */private String columns_data;/* * columns 的名字，由 columns.nameOption 定义。 */private String columns_name;/* * 标记列是否能被搜索,为true代表可以，否则不可以，这个是由 columns.searchableOption 控制 */private String columns_searchable;/* * 标记列是否能排序,为 true代表可以，否则不可以，这个是由 columns.orderableOption 控制 */private boolean is_orderable;/* * 标记具体列的搜索条件 */private String columns_search_value;/* * 特定列的搜索条件是否视为正则表达式， 如果为 true代表搜索的值是作为正则表达式处理，为 false则不是。 * 注意：通常在服务器模式下对于大数据不执行这样的正则表达式，但这都是自己决定的 */private boolean is_search_regex;/*------------------DT自动请求的参数(Sent parameters) end--------------------*//*------------------服务器需要返回的数据(Returned data) begin--------------------*//* * 必要。上面提到了，Datatables发送的draw是多少那么服务器就返回多少。 * 这里注意，作者出于安全的考虑，强烈要求把这个转换为整形，即数字后再返回，而不是纯粹的接受然后返回，这是 为了防止跨站脚本（XSS）攻击。 */// private int draw;/* * 必要。即没有过滤的记录数（数据库里总共记录数） */private int recordsTotal;/* * 必要。过滤后的记录数（如果有接收到前台的过滤条件，则返回的是过滤后的记录数） */private int recordsFiltered;/* * 必要。表中中需要显示的数据。这是一个对象数组，也可以只是数组， 区别在于 纯数组前台就不需要用 columns绑定数据，会自动按照顺序去显示 * ，而对象数组则需要使用 columns绑定数据才能正常显示。 注意这个 data的名称可以由 ajaxOption 的 * ajax.dataSrcOption 控制 */private List<T> data;/* * 可选。你可以定义一个错误来描述服务器出了问题后的友好提示 */private String error;/*-------------可选参数-----------------*//* * 自动绑定到 tr节点上 */private String dt_rowId;/* * 自动把这个类名添加到 tr */private String dt_rowClass;/* * 使用 jQuery.data() 方法把数据绑定到row中，方便之后用来检索（比如加入一个点击事件） */private Object dt_rowData;/* * 自动绑定数据到 tr上，使用 jQuery.attr() 方法，对象的键用作属性，值用作属性的值。 注意这个 需要 Datatables * 1.10.5+的版本才支持 */private Object dt_rowAttr;/*-------------可选参数-----------------*//*------------------服务器需要返回的数据(Returned data) end--------------------*//* * 当前页码 */private int page_num =ISystemConstants.PAGE_NUM;/* * 每页数据 */private int page_size = ISystemConstants.PAGE_SIZE;public DataTablePageUtil() {}public DataTablePageUtil(HttpServletRequest request) {//开始的数据行数String start = request.getParameter("start");//每页的数据数String length = request.getParameter("length");//DT传递的draw:String draw = request.getParameter("draw");this.setStart(Integer.parseInt(start));this.setLength(Integer.parseInt(length));this.setDraw(Integer.parseInt(draw));//计算页码this.page_num = (Integer.parseInt(start) / Integer.parseInt(length)) + 1;}public int getDraw() {return draw;}public void setDraw(int draw) {this.draw = draw;}public int getStart() {return start;}public void setStart(int start) {this.start = start;}public int getLength() {return length;}public void setLength(int length) {this.length = length;}public String getSearch() {return search;}public void setSearch(String search) {this.search = search;}public boolean isIs_search() {return is_search;}public void setIs_search(boolean is_search) {this.is_search = is_search;}public int[] getOrder() {return order;}public void setOrder(int[] order) {this.order = order;}public String getOrder_dir() {return order_dir;}public void setOrder_dir(String order_dir) {this.order_dir = order_dir;}public String getColumns_data() {return columns_data;}public void setColumns_data(String columns_data) {this.columns_data = columns_data;}public String getColumns_name() {return columns_name;}public void setColumns_name(String columns_name) {this.columns_name = columns_name;}public String getColumns_searchable() {return columns_searchable;}public void setColumns_searchable(String columns_searchable) {this.columns_searchable = columns_searchable;}public boolean isIs_orderable() {return is_orderable;}public void setIs_orderable(boolean is_orderable) {this.is_orderable = is_orderable;}public String getColumns_search_value() {return columns_search_value;}public void setColumns_search_value(String columns_search_value) {this.columns_search_value = columns_search_value;}public boolean isIs_search_regex() {return is_search_regex;}public void setIs_search_regex(boolean is_search_regex) {this.is_search_regex = is_search_regex;}public int getRecordsTotal() {return recordsTotal;}public void setRecordsTotal(int recordsTotal) {this.recordsTotal = recordsTotal;}public int getRecordsFiltered() {return recordsFiltered;}public void setRecordsFiltered(int recordsFiltered) {this.recordsFiltered = recordsFiltered;}public List<T> getData() {return data;}public void setData(List<T> data) {this.data = data;}public String getError() {return error;}public void setError(String error) {this.error = error;}public String getDt_rowId() {return dt_rowId;}public void setDt_rowId(String dt_rowId) {this.dt_rowId = dt_rowId;}public String getDt_rowClass() {return dt_rowClass;}public void setDt_rowClass(String dt_rowClass) {this.dt_rowClass = dt_rowClass;}public Object getDt_rowData() {return dt_rowData;}public void setDt_rowData(Object dt_rowData) {this.dt_rowData = dt_rowData;}public Object getDt_rowAttr() {return dt_rowAttr;}public void setDt_rowAttr(Object dt_rowAttr) {this.dt_rowAttr = dt_rowAttr;}public int getPage_num() {return page_num;}public void setPage_num(int page_num) {this.page_num = page_num;}public int getPage_size() {return page_size;}public void setPage_size(int page_size) {this.page_size = page_size;}}

基本上就这样了。

还有查询：我用的查询是传递的动态参数，这个可以看下api ajax部分，代码参考：

//条件查询$('#search_but').on('click', function() {//参数var xx = $("#xx").val();//参数var xx = $("#xx").val();//参数//查询条件var param = {"xx" : xx,"xx" : xx};oTable.settings()[0].ajax.data = param;oTable.ajax.reload();});