配合pagehelper所写的前端分页插件

一、JavaScript代码

因为自己的需求比较简单，所以动手写了个处理分页的js。
总体思路：在页面上载入页码按钮，对每个按钮的操作进行绑定（我所用的方式，是控制a标签中的href属性，亦可使用onclick事件）
直接上代码，配合注释应该容易理解。需要说明请向下翻。
需要引入jquery和bootstrap(bootstrap中的pagination组件，就可以实现分页部分的前端渲染)
使用ajax获取后端数据

/*
 * @desc 使用时，优先载入jquery
 * @author wrt
 * 仅需载入loadpagebtn()、pageload()两个方法
 * loadpagebtn()放在调用方法内的第一行
 * pageload()放在后端数据成功接收后，载入数字页码
 */
/*
 * @method
 * @param obj 页码层对象名称
 * @desc 载入页码按钮
 */
function loadpagebtn(obj){
	var temp="<ul id='prepage' class='pagination'>"+
        		"<li><a>首页</a></li>"+
        		"<li><a>上一页</a></li></ul>"+
        		"<ul id='numpage' class='pagination'></ul>"+
        		"<ul id='nextpage' class='pagination'>"+
        		"<li><a>下一页</a></li>"+
        		"<li><a style='background-color: #f0ad4e;color: #FFFFFF'>尾页</a></li></ul>";
    if($(obj+"").find('ul').length<=0){
    	$(obj+"").append(temp);
    }else{
    	$(obj+"").empty();
    	$(obj+"").append(temp);
    }
}
/*
 * @method
 * @param obj 条数选择层对象名称
 * @param func 被调用方法名称
 * @desc 载入每页数据显示条数
 */
/*function loadsizeopt(obj){
	let temp="<label class='pagination'>显示</label>"+
            "<label class='pagination'>"+
                "<select class='form-control' id='showsize'>"+
                    "<option>5</option><option>10</option>"+
                 "</select></label><label class='pagination'>条记录/页</label>";
	if($(obj+"").find('select').length<=0){
		$(obj+"").append(temp);
	}else{
    	$(obj+"").empty();
    	$(obj+"").append(temp);
    }

}*/
/*
 * @method
 * @param func 被调用方法名称
 * @param data 后端传入数据
 * @param curpage 当前页码
 * @param pageSize 每页条数
 * @desc 数字页码载入
 */
function pageload(func,data,curpage,pageSize){
	each(func,data,curpage,pageSize);
	var pagenumarr=data.data.navigatepageNums;
	var arrlength=pagenumarr.length;
	if(arrlength-curpage>=5){
		pagenumarr.splice(0,curpage-1);
	}else{
		pagenumarr.splice(0,arrlength-5);
	}

	var pagenumtemp="";
	var $numobj=$('#numpage');
	$numobj.empty();
	if(pagenumarr.length>5){
		$.each(pagenumarr,function(i,e){
			pagenumtemp+="<li><a href=javascript:"+func+"("+e+","+pageSize+")>"+e+"</a></li>";
			if(i===4){
				return false;
			}
		});
		$numobj.append(pagenumtemp);
	}else{
		$.each(pagenumarr,function(i,e){
			pagenumtemp+="<li><a href=javascript:"+func+"("+e+","+pageSize+")>"+e+"</a></li>";
		});
		$numobj.append(pagenumtemp);
	}

}
/*
 * @method
 * @param func 被调用方法名称
 * @param data 后端传入数据
 * @param curpage 当前页码
 * @param pageSize 每页条数
 * @desc 固定按钮a标签属性载入
 */
function each(func,data,curpage,pageSize){
	var $prepage=$('#prepage li a');
	var prepage=data.data.prePage;
	$.each($prepage, function(i,e) {
		var $tempobj=$(e);
		if(i===0||prepage===0){
			ahref(func,$tempobj,1,pageSize);
		}else if(i===1&&prepage!==0){
			ahref(func,$tempobj,prepage,pageSize);
		}
	});
	var $nextpage=$('#nextpage li a');
	var nextpage=data.data.nextPage;
	$.each($nextpage, function(i,e) {
		var $tempobj=$(e);
		var tempval=$tempobj.html();
		if(tempval==="尾页"||0===nextpage){
			ahref(func,$tempobj,data.data.pages,pageSize);
		}else if(tempval==="下一页"){
			ahref(func,$tempobj,nextpage,pageSize);
		}
	});
}
/*
 * @method
 * @param func 被调用方法名称
 * @param obj 页码层对象名称
 * @param pagenum 跳转页码
 * @param pageSize 每页条数
 * @desc a标签属性载入(当前页及页码范围)
 */
function ahref(func,obj,pagenum,pagesize){
	return obj.attr("href","javascript:"+func+"("+pagenum+","+pagesize+")");
}

二、代码说明

1.java后端使用pagehelper

在服务实现层引入pagehelper的包

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
public PageInfo<Systems> getAllSys(int pageNum,int pageSize,Systems systems) {
		PageHelper.startPage(pageNum, pageSize);
		List<Systems> temp=dao.selectAllSys(systems);
		return new PageInfo<>(temp);
	}

不用修改数据库查询语句，在调用数据库查询方法前，使用PageHelper.startPage初始化插件，传入当前页码数和每页显示条数。查询后得到的结果（这里是一个list集合），放入新创建的PageInfo对象中，并返回。

2.经过pagehelper处理后的数据示例

{"msg":"查询成功","code":"Y","data":{"total":5,"list":[{"code":1,"initials":"BL"},{"code":2,"initials":"LG"},{"code":3,"initials":"XG"},{"code":4,"initials":"CZ"},{"code":27,"initials":"DD"}],"pageNum":1,"pageSize":5,"size":5,"startRow":1,"endRow":5,"pages":1,"prePage":0,"nextPage":0,"isFirstPage":true,"isLastPage":true,"hasPreviousPage":false,"hasNextPage":false,"navigatePages":8,"navigatepageNums":[1],"navigateFirstPage":1,"navigateLastPage":1}}

访问分页查询接口后，返给前端的json数据。"data"中存放的，即是pagehelper处理后的数据（上一个小节java代码中，getAllSys方法的返回值）。下表中的字段，是我所需要用到的。

字段名	字段释义
total	符合查询条件数据的总条数
pageNum	当前页码
pageSize	每页显示条数
navigatepageNums	页码数组
prePage	前一页
nextPage	后一页

3.方法说明

(1)loadpagebtn

用于载入“首页”、“尾页”、“上一页”、“下一页”等按钮。此时，a标签内的href属性还没有载入。
这一部分需要一个单独的层(div)来放置，obj参数，即是指这个层的对象

(2)pageload

数字页码部分载入及每一个按钮（a标签）的跳转链接载入。按钮点击的时候，相当于重新访问一次查询接口，根据后端返回的数据，对相应的按钮赋予对应的href属性。方法内调用的each方法和ahref方法就是在完成这个操作。

(3)loadsizeopt

被注释掉的这个方法，原本是想用于每页显示条数的载入。这一部分没有处理好change事件的触发，所以放在页面载入的时候处理。

三、其他说明

1.pagehelper包引入

如果是使用maven管理，那么需要引入三个包，以避免出现问题

<!-- 分页插件 -->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper</artifactId>
    <version>5.1.8</version>
</dependency>
<dependency>
	<groupId>com.github.pagehelper</groupId>
	<artifactId>pagehelper-spring-boot-autoconfigure</artifactId>
	<version>1.2.3</version>
</dependency>
<dependency>
	<groupId>com.github.pagehelper</groupId>
	<artifactId>pagehelper-spring-boot-starter</artifactId>
	<version>1.2.3</version>
</dependency>

2.application.yml配置

可以不在配置文件中进行配置，一般默认即可

pagehelper:
   #使用mysql数据库，插件将根据这个属性，自动添加分页相关sql语句
   helperDialect: mysql
   #分页合理化，true开启，如果分页参数不合理会自动修正。默认false不启用
   reasonable: true
   #offset作为PageNum使用
   offsetAsPageNum: true
   #RowBounds方式是否做count查询
   rowBoundsWithCount: true
   #是否支持接口参数来传递分页参数，默认false
   supportMethodsArguments: true
   #参数映射，当offsetAsPageNum=false的时候，设置无效
   params: count=countSql
   #当设置为true的时候，如果pagesize设置为0（或RowBounds的limit=0），就不执行分页
   pageSizeZero: false