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

目录

  • 一、JavaScript代码
  • 二、代码说明
    • 1.java后端使用pagehelper
    • 2.经过pagehelper处理后的数据示例
    • 3.方法说明
      • (1)loadpagebtn
      • (2)pageload
      • (3)loadsizeopt
  • 三、其他说明
    • 1.pagehelper包引入
    • 2.application.yml配置

一、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=""+
        		"
    "
    + ""; 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+")"); }

    二、代码说明

    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.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>
    

    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
    

    你可能感兴趣的:(JavaScript)