一站式分頁解決方案:後臺分頁PageHelper使用,頁面分頁,非同步ajax分頁pageutils.js
阿新 • • 發佈：2019-01-28
之前做分頁功能一直都沒有找到一個比較合適的完整的方式,現整理下完整的流程.給大家展示一個完整的流程
專案: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
頁面載入後就執行方法,用於載入資料
這樣就可以了