一站式分页解决方案:后台分页PageHelper使用,页面分页,异步ajax分页pageutils.js

之前做分页功能一直都没有找到一个比较合适的完整的方式,现整理下完整的流程.给大家展示一个完整的流程

项目:springMVC+mybatis+mysql

我们需要使用到的插件主要有:

PageHelper:主要用于后台分页

以及pageUtils.js脚本,用于前台分页

---------------------------------------------------------------------

首先说一下后台的分页,有关于pagehelper的使用以及源码,请自行百度,

https://github.com/pagehelper/Mybatis-PageHelper

pageUtils.js源码

/** *  *  * 调用：$(".nav.page").initPage(10,1,10); 或 $(".nav.page").initPage(10,1,10,targetForm);  *  * 备注：第一个参数是总页数，第二个参数是当前页数,第三个参数是每页条数,第四个参数是提交的目标form *  */$.fn.extend({targetForm:null,totalPage : 0,_totalPage:0,_callback:null,_objPage:null,initPage : function(totalPage,currentPage,pageSize,targetForm) {var limitSize = 10;//最多展示10个分页的按钮显示var tips_html = $(this).html();if (totalPage == null || totalPage == undefined || totalPage == "" || totalPage=="null" || totalPage == 0) {$(this).html("暂无分页记录");if(tips_html!=""){$(this).html(tips_html).css({'float':'none','text-align':'center','height':'auto'});}return;}$.fn.totalPage = parseInt(totalPage);$.fn.targetForm = $("#"+targetForm);if (currentPage == null || currentPage == undefined || currentPage == "" || currentPage == "null" || currentPage == 0) {$(this).html("暂无分页记录");if(tips_html!=""){$(this).html(tips_html).css({'float':'none','text-align':'center','height':'auto'});}return;}currentPage = parseInt(currentPage);if (pageSize == null || pageSize == undefined || pageSize == "" || pageSize == "null" || pageSize == 0){$(this).html("暂无分页记录");if(tips_html!=""){$(this).html(tips_html).css({'float':'none','text-align':'center','height':'auto'});}return;}pageSize = parseInt(pageSize);var pageHtml = "每页"+pageSize+"条  ，共"+totalPage+"页  ";/** * 当前是第一页，上一页则是灰的 */if (currentPage <= 1) {pageHtml += '<a class="no" href="javascript:;">上一页</a>';} else {pageHtml += '<a href="javascript:$.fn.goPage('+(currentPage-1)+');">上一页</a>';}if (totalPage <= limitSize) {for (var i = 1; i <= totalPage; i++) {pageHtml += '<a ';/** *选中当前页** */if (currentPage == i) {pageHtml += ' class="active" ';}pageHtml += '  href="javascript:$.fn.goPage('+i+');">' + i + '</a>';}}else if(currentPage <= limitSize / 2 + 1){for (var i = 1; i <= limitSize; i++) {pageHtml += '<a ';/** *选中当前页** */if (currentPage == i) {pageHtml += ' class="active" ';}pageHtml += '  href="javascript:$.fn.goPage('+i+');">' + i + '</a>';}}else if(currentPage+limitSize / 2 >totalPage){for (var i = totalPage-9; i <= totalPage; i++) {pageHtml += '<a ';/** *选中当前页** */if (currentPage == i) {pageHtml += ' class="active" ';}pageHtml += '  href="javascript:$.fn.goPage('+i+');">' + i + '</a>';}}else if (currentPage > limitSize / 2 + 1) {for (var i = currentPage - limitSize / 2; i <= currentPage+ (limitSize / 2 - 1); i++) {pageHtml += '<a ';/** *选中当前页** */if (currentPage == i) {pageHtml += ' class="active" ';}pageHtml += '  href="javascript:$.fn.goPage('+i+');">' + i + '</a>';}}/** * 当前是最后一页，下一页则是灰的 */if (currentPage == totalPage) {pageHtml += '<a class="no" href="javascript:;">下一页</a>';} else {pageHtml += '<a href="javascript:$.fn.goPage('+(currentPage+1)+');">下一页</a>';}pageHtml += ' 转到：<cite class="wsc-form-cite a text"><input type="text" id="page" name="page" value="" inited="true" ></cite> 页';pageHtml += '<a href="javascript:;" class="_jump_page_link">确定</a>';$(this).html(pageHtml);$("._jump_page_link").on("click",function(){//var _page = $(this).prev().val();var _page = $("#page").val();$.fn.goPage(_page);});},/** * 跳转到第几页 */goPage:function(nextPage){if(!(/^\d+$/.test(nextPage)) || parseInt(nextPage)<=0 || parseInt(nextPage)>$.fn.totalPage){alert("非法的跳转页数");return;}if($.fn.targetForm.length){if($('[name="pageNum"]').length==0){$("<input type='hidden' name='pageNum' value='"+nextPage+"' />").appendTo($.fn.targetForm);}else{$('[name="pageNum"]').eq(0).attr("value",nextPage);}$.fn.targetForm.submit();}else{var _pageUrl = window.location.href;var params = _pageUrl.split("?");window.location.href = params[0]+"?pageNum="+nextPage;}},/** * ajax分页回调 */initAjaxPage : function(callback) {$.fn._callback = callback;$.fn._objPage = $(this);callback(1,$(this));},/** * 渲染分页 */buildPage:function(pageNum,pageSize,total){var limitSize = 10;//最多展示10个分页的按钮显示var tips_html = $(this).html();if (total == null || total == undefined || total == "" || total=="null" || total == 0) {$(this).html("暂无分页记录");if(tips_html!=""){$(this).html(tips_html).css({'float':'none','text-align':'center','height':'auto'});}return;}$.fn._totalPage = parseInt(total);var totalPage = parseInt(total);if (pageNum == null || pageNum == undefined || pageNum == "" || pageNum == "null" || pageNum == 0) {$(this).html("暂无分页记录");if(tips_html!=""){$(this).html(tips_html).css({'float':'none','text-align':'center','height':'auto'});}return;}var currentPage = parseInt(pageNum);if (pageSize == null || pageSize == undefined || pageSize == "" || pageSize == "null" || pageSize == 0){$(this).html("暂无分页记录");if(tips_html!=""){$(this).html(tips_html).css({'float':'none','text-align':'center','height':'auto'});}return;}var pageSize = parseInt(pageSize);var pageHtml = "每页"+pageSize+"条  ，共"+total+"页  ";/** * 当前是第一页，上一页则是灰的 */if (currentPage <= 1) {pageHtml += '<a class="no" href="javascript:;">上一页</a>';} else {pageHtml += '<a href="javascript:$.fn.goAjaxPage('+(currentPage-1)+');">上一页</a>';}if (totalPage <= limitSize) {for (var i = 1; i <= totalPage; i++) {pageHtml += '<a ';/** *选中当前页** */if (currentPage == i) {pageHtml += ' class="active" ';}pageHtml += '  href="javascript:$.fn.goAjaxPage('+i+');">' + i + '</a>';}}else if(currentPage <= limitSize / 2 + 1){for (var i = 1; i <= limitSize; i++) {pageHtml += '<a ';/** *选中当前页** */if (currentPage == i) {pageHtml += ' class="active" ';}pageHtml += '  href="javascript:$.fn.goAjaxPage('+i+');">' + i + '</a>';}}else if(currentPage+limitSize / 2 >totalPage){for (var i = totalPage-9; i <= totalPage; i++) {pageHtml += '<a ';/** *选中当前页** */if (currentPage == i) {pageHtml += ' class="active" ';}pageHtml += '  href="javascript:$.fn.goAjaxPage('+i+');">' + i + '</a>';}}else if (currentPage > limitSize / 2 + 1) {for (var i = currentPage - limitSize / 2; i <= currentPage+ (limitSize / 2 - 1); i++) {pageHtml += '<a ';/** *选中当前页** */if (currentPage == i) {pageHtml += ' class="active" ';}pageHtml += '  href="javascript:$.fn.goAjaxPage('+i+');">' + i + '</a>';}}/** * 当前是最后一页，下一页则是灰的 */if (currentPage == totalPage) {pageHtml += '<a class="no" href="javascript:;">下一页</a>';} else {pageHtml += '<a href="javascript:$.fn.goAjaxPage('+(currentPage+1)+');">下一页</a>';}pageHtml += ' 转到：<input type="text" name="page" value="" inited="true"> 页';pageHtml += '<a href="javascript:;" class="_jump_page_link">确定</a>';$(this).html(pageHtml);$("._jump_page_link").on("click",function(){var _page = $(this).prev().val();$.fn.goAjaxPage(_page);});},/** * 以ajax的方式跳转到第几页 */goAjaxPage:function(nextPage){if(!(/^\d+$/.test(nextPage)) || parseInt(nextPage)<=0 || parseInt(nextPage)>$.fn._totalPage){alert("非法的跳转页数");return;}$.fn._callback(parseInt(nextPage),$.fn._objPage);}});

使用pagehelper需要配置文件配置

(datasource是数据库连接的一些配置)

<!-- myBatis文件 --><bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"><property name="dataSource" ref="dataSource" /><!-- 自动扫描映射文件 --><property name="mapperLocations"><array><value>classpath:mapping/**/*.xml</value></array></property><property name="plugins"><array><bean class="com.github.pagehelper.PageHelper"><property name="properties"><value>dialect=mysql</value></property></bean></array></property></bean>

也可以参考作者提供的mybatis配置文件实例,如下:

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE configuration    PUBLIC "-//mybatis.org//DTD Config 3.0//EN"    "http://mybatis.org/dtd/mybatis-3-config.dtd"><configuration>  <settings>    <setting name="cacheEnabled" value="true"/>    <setting name="lazyLoadingEnabled" value="false"/>    <setting name="aggressiveLazyLoading" value="true"/>    <setting name="logImpl" value="LOG4J"/>  </settings>  <typeAliases>    <package name="isea533.mybatis.model"/>  </typeAliases><plugins>  <plugin interceptor="com.github.pagehelper.PageHelper">    <property name="dialect" value="hsqldb"/>    <property name="pageSizeZero" value="true"/>    <property name="reasonable" value="true"/>  </plugin></plugins><environments default="development"><environment id="development"><transactionManager type="JDBC"><property name="" value="" /></transactionManager><dataSource type="UNPOOLED"><property name="driver" value="org.hsqldb.jdbcDriver" /><property name="url" value="jdbc:hsqldb:mem:basetest" /><property name="username" value="sa" /></dataSource></environment></environments><mappers><mapper resource="mapper/CountryMapper.xml" /></mappers></configuration

在确保项目的确可以正确引入pagehelper插件,以及js文件之后,我们开始整体的介绍

后台的分页使用:

只需要在调用前执行startPage方法,他会处理紧接下来的第一条执行sql语句的方法

说白了,就是不管是mapper接口还是service方法,只要他是执行sql功能的方法,紧跟着startPage就可以实现分页(其实就是执行sql语句的拦截时候加了一个limit用以返回结果)

PageHelper.startPage(pageNum, Constant.PAGE_FIVE_NUM);
courseList =courseService.selectParticCourse(courseEntity);
PageInfo<CourseEntity> participantCoursePageInfo = new PageInfo<CourseEntity>(courseList);

pageInfo可以用来封装页面的信息,页面大小,每页个数

只需要把list以及pageInfo信息发送到页面即可

后台的分页已经搞定了,只要配置好,使用起来很简单.

此时,你应该已经确保java后台可以正确获取到你查询到的列表了,接下来看页面的操作

1,如果是单页面的分页,就是不需要异步加载的

你需要引入js也就是上面那一段,直接copy即可使用,无需修改

而且,你的页面应该有有关分页信息的div,如:

                    <!--分页-->
                    <div class="nav page text align-right margin-top-25  margin-bottom-30">


                  </div>

没有请自行添加

同时你还需要一个空的div用于存放生成的拼接后的html

        <div id="browerCourseDiv">
</div>

换句话说,你的页面至少要有

        <div id="browerCourseDiv"></div>        <!-- 浏览的 -->        <div class="nav page browerNav text align-right padding-top-25  padding-bottom-30" id="browerNavigation">        </div> 

这几行代码,就已经具备了可以承载分页信息的基础代码

$(document).ready(function(){
//分页
$(function(){
$(".nav.page").initPage('${result.pages }','${result.pageNum}','${result.pageSize}','');
});


});

你需要在页面开始的时候初始化分页信息,这样在页面加载后,就会执行方法向后台请求数据,请求到的数据,就会异步加载到这个指定id的div内

result就是你后台通过request.setAttribute或者map.put到页面的分页信息数据,具体请查看pageInfo类

这样子就可以直接具备分页信息了

非常的简单就可以做到了

2,如果是需要异步加载的

可以再页面加载后,就自动调用function

..........

<script>
$(function(){
initCourseList();



})
</script>
</head>

函数的框架如下

//初始化tab页面列表function initCourseList(tabId){//tabId是参数,你可以传递也可以不传递,也可以在此处传递多个参数//自定义的一些参数,如果需要的话function initPage(pageNum,obj){var loadPageCount = 0;//加载页面次数var _pageNum = 1;_pageNum = pageNum;//这个一定要有的,向后台请求的时候需要带着页码var _html='';$.ajax({   type: "POST",   url: root+"/web/userCenter/xxxxxxx.do",   data: {"pageNum" : _pageNum,"tabId":tabId,"userId":userId

   },   async:false,   success: function(result){   loadPageCount++;   if(result.courseList.length>0){      $.each(result.courseList, function(index, Item){       _html += '<div class="fabu_a list">'    +'<ul>'    +'<li class="fabu_a_title">'<span style="white-space:pre"></span>...........

<span style="white-space:pre"></span>//此处根据你的返回列表数据,动态的拼接成一段html<span style="white-space:pre"></span>..........               });      if(result.pageInfo.pageNum){   $(obj).buildPage(result.pageInfo.pageNum,result.pageInfo.pageSize,result.pageInfo.pages);   };             }else{    _html='';    //如果没有返回数据,或者列表为空,你可能需要有一些提示信息,在此处拼接      $(obj).html("");   $(obj).buildPage(0,10,0);   }

<span style="white-space:pre"></span>//这个是把生成的html动态的加载到这个空的div内<span style="white-space:pre"></span>$("#browerCourseDiv").html(_html);          },   error:function()   {   alert("出错");   }});};}

后台在处理这个请求的时候,如果有页码信息,设置成页码指定的值,如果没有的话,就是默认第一页了

PageHelper.startPage(pageNum, Constant.PAGE_FIVE_NUM);

这样子就完成了这样一个过程

简单的说就是:

后台有根据pagehelper处理分页,把列表以及页面的信息(页面大小,当前页码等)返回到页面

页面只需要

引入js文件

有一个分页div以及一个用于存放拼接后的html的空的div

页面加载后就执行方法,用于加载数据

这样就可以了