目录
一、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
524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
