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数据


片段:
//封装数据给DataTables
dataTable.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里面的key
						data : {
							//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);

//封装数据给DataTables
dataTable.setDraw(dataTable.getDraw());
dataTable.setData(pageInfo.getList());  
dataTable.setRecordsTotal((int)pageInfo.getTotal());  
dataTable.setRecordsFiltered(dataTable.getRecordsTotal()); 

//返回数据到页面
JSONObject jsonObject = JSONObject.fromObject(dataTable);


注:PageHelper还有一种分页,是用PageInfo接收返回,贴下代码参考

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 {

	/*------------------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 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 getData() {
		return data;
	}

	public void setData(List 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();
});




你可能感兴趣的:(知新)