之前做分页功能一直都没有找到一个比较合适的完整的方式,现整理下完整的流程.给大家展示一个完整的流程
项目: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
页面加载后就执行方法,用于加载数据
这样就可以了
扫一扫
290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
