因为自己的需求比较简单,所以动手写了个处理分页的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=""
+
"首页 "+
"上一页 "+
"
"+
""
+
"下一页 "+
"尾页 ";
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=""+
"";
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+="+func+"("+e+","+pageSize+")>"+e+" ";
if(i===4){
return false;
}
});
$numobj.append(pagenumtemp);
}else{
$.each(pagenumarr,function(i,e){
pagenumtemp+="+func+"("+e+","+pageSize+")>"+e+" ";
});
$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+")");
}
在服务实现层引入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对象中,并返回。
{"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 | 后一页 |
用于载入“首页”、“尾页”、“上一页”、“下一页”等按钮。此时,a标签内的href属性还没有载入。
这一部分需要一个单独的层(div)来放置,obj参数,即是指这个层的对象
数字页码部分载入及每一个按钮(a标签)的跳转链接载入。按钮点击的时候,相当于重新访问一次查询接口,根据后端返回的数据,对相应的按钮赋予对应的href属性。方法内调用的each方法和ahref方法就是在完成这个操作。
被注释掉的这个方法,原本是想用于每页显示条数的载入。这一部分没有处理好change事件的触发,所以放在页面载入的时候处理。
如果是使用maven管理,那么需要引入三个包,以避免出现问题
<dependency>
<groupId>com.github.pagehelpergroupId>
<artifactId>pagehelperartifactId>
<version>5.1.8version>
dependency>
<dependency>
<groupId>com.github.pagehelpergroupId>
<artifactId>pagehelper-spring-boot-autoconfigureartifactId>
<version>1.2.3version>
dependency>
<dependency>
<groupId>com.github.pagehelpergroupId>
<artifactId>pagehelper-spring-boot-starterartifactId>
<version>1.2.3version>
dependency>
可以不在配置文件中进行配置,一般默认即可
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