Mybatis的pageHelper插件实现分页

1.场景分析

     近期的项目中屡次遇到分页的需求，今天笔者就mybatis的pageHelper插件实现分页且结合前端展示界面详细给大家讲解下，望能够帮助更多的朋友！

2.pageHelper的配置

①添加pageHelper插件依赖

<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.1.4</version>
</dependency>

 ②在mybatis-config.xml配置pageHelper

<?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>
<!--使用jdbc的getGeneratekeys获取自增主键值-->
<setting name="useGeneratedKeys" value="true"/>
<!--使用列别名替换列名　　默认值为true
select name as title(实体中的属性名是title) form table;
开启后mybatis会自动帮我们把表中name的值赋到对应实体的title属性中
-->
<setting name="useColumnLabel" value="true"/>

<!--开启驼峰命名转换Table:create_time到 Entity(createTime)-->
<setting name="mapUnderscoreToCamelCase" value="true"/>
</settings>

<!-- 配置pagehelper -->
<plugins>
<!-- com.github.pagehelper为PageHelper类所在包名 -->
<plugin interceptor="com.github.pagehelper.PageHelper">
<!-- 4.0.0以后版本可以不设置该参数 -->
<property name="dialect" value="mysql"/>
<!-- 该参数默认为false -->
<!-- 设置为true时，会将RowBounds第一个参数offset当成pageNum页码使用 -->
<!-- 和startPage中的pageNum效果一样-->
<property name="offsetAsPageNum" value="true"/>
<!-- 该参数默认为false -->
<!-- 设置为true时，使用RowBounds分页会进行count查询 -->
<property name="rowBoundsWithCount" value="true"/>
<!-- 设置为true时，如果pageSize=0或者RowBounds.limit = 0就会查询出全部的结果 -->
<!-- （相当于没有执行分页查询，但是返回结果仍然是Page类型）-->
<property name="pageSizeZero" value="true"/>
<!-- 3.3.0版本可用 - 分页参数合理化，默认false禁用 -->
<!-- 启用合理化时，如果pageNum<1会查询第一页，如果pageNum>pages会查询最后一页 -->
<!-- 禁用合理化时，如果pageNum<1或pageNum>pages会返回空数据 -->
<property name="reasonable" value="true"/>
<!-- 3.5.0版本可用 - 为了支持startPage(Object params)方法 -->
<!-- 增加了一个`params`参数来配置参数映射，用于从Map或ServletRequest中取值 -->
<!-- 可以配置pageNum,pageSize,count,pageSizeZero,reasonable,orderBy,不配置映射的用默认值 -->
<!-- 不理解该含义的前提下，不要随便复制该配置 -->
<property name="params" value="pageNum=start;pageSize=limit;"/>
<!-- 支持通过Mapper接口参数来传递分页参数 -->
<property name="supportMethodsArguments" value="true"/>
<!-- always总是返回PageInfo类型,check检查返回类型是否为PageInfo,none返回Page -->
<property name="returnPageInfo" value="check"/>
</plugin>
</plugins>

</configuration>

特别注意：

<property name="dialect" value="mysql"/>

后台数据库是什么value就写什么，对号入座。

③在spring-dao中对mybatis-config.xml进行申明

<!--３.配置SqlSessionFactory对象-->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<!--往下才是mybatis和spring真正整合的配置-->
<!--注入数据库连接池-->
<property name="dataSource" ref="dataSource"/>
<!--配置mybatis全局配置文件:mybatis-config.xml-->
<property name="configLocation" value="classpath:mybatis-config.xml"/>
<!--扫描entity包,使用别名,多个用;隔开-->
<property name="typeAliasesPackage" value="com.cckj.bean"/>
<!--扫描sql配置文件:mapper需要的xml文件-->
<property name="mapperLocations" value="classpath:mapper/*.xml"/>
</bean>

3.实现方案

前端代码：
①分页插件主代码：

<link href="css/simple.css" type="text/css" rel="stylesheet"/>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.page.js"></script>
<script>

var page=localStorage.getItem("total");

$(".tcdPageCode").createPage({
pageCount:localStorage.getItem("total"),
current:1,
backFn:function(p){
initdata(p);//触发逻辑
}
});
</script>

②jquery.page.js代码

(function($){
var ms = {
init:function(obj,args){
return (function(){
ms.fillHtml(obj,args);
ms.bindEvent(obj,args);
})();
},
//填充html
fillHtml:function(obj,args){
return (function(){
obj.empty();
//上一页
if(args.current > 1){
obj.append('<a href="javascript:;" class="prevPage">上一页</a>');
}else{
obj.remove('.prevPage');
obj.append('<span class="disabled">上一页</span>');
}
//中间页码
if(args.current != 1 && args.current >= 4 && args.pageCount != 4){
obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>');
}
if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){
obj.append('<span>...</span>');
}
var start = args.current -2,end = args.current+2;
if((start > 1 && args.current < 4)||args.current == 1){
end++;
}
if(args.current > args.pageCount-4 && args.current >= args.pageCount){
start--;
}
for (;start <= end; start++) {
if(start <= args.pageCount && start >= 1){
if(start != args.current){
obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>');
}else{
obj.append('<span class="current">'+ start +'</span>');
}
}
}
if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){
obj.append('<span>...</span>');
}
if(args.current != args.pageCount && args.current < args.pageCount -2  && args.pageCount != 4){
obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>');
}
//下一页
if(args.current < args.pageCount){
obj.append('<a href="javascript:;" class="nextPage">下一页</a>');
}else{
obj.remove('.nextPage');
obj.append('<span class="disabled">下一页</span>');
}
})();
},
//绑定事件
bindEvent:function(obj,args){
return (function(){
obj.on("click","a.tcdNumber",function(){
var current = parseInt($(this).text());
ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current);
}
});
//上一页
obj.on("click","a.prevPage",function(){
var current = parseInt(obj.children("span.current").text());
ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current-1);
}
});
//下一页
obj.on("click","a.nextPage",function(){
var current = parseInt(obj.children("span.current").text());
ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current+1);
}
});
})();
}
}
$.fn.createPage = function(options){
var args = $.extend({
pageCount : 15,
current : 1,
backFn : function(){}
},options);
ms.init(this,args);
}
})(jQuery);

③simple.css样式代码

*{ margin:0; padding:0; list-style:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:none;}
.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;text-align:left;}
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px;    line-height: 25px; padding: 0 10px;border: 1px solid #ddd;    margin: 0 2px;border-radius: 4px;vertical-align: middle;}
.tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;}
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca;    border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}
.tcdPageCode span.disabled{    display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;    color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}

④主界面前端代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<link rel="stylesheet" href="css/gongchang-style.css" />
<link href="css/page.css" type="text/css" rel="stylesheet"/>
<link href="css/simple.css" type="text/css" rel="stylesheet"/>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/page.js"></script>
<script type="text/javascript" src="js/jQuery.js"></script>
<script src="js/echarts.js"></script>

</head>
<body onload="initdata(1)">
<div>

<div class="grid-wrap">
<div>
<input type="text" id="nicheng" placeholder="搜索">
<input type="button" onclick="search()" value="搜索">

</div>
<div class="grid"  id="grid1">
<div class="grid-header" id="grid1">
<span class="row-1">姓名</span>
<span class="row-1">年龄</span>
<span class="row-1">性别</span>
<span class="row-1">手机号码</span>
<span class="row-1">居住地址</span>
</div>
<div class="grid-body">
<!-- <div class="grid-item">
<span class="row-1">zhangxing</span>
<span class="row-1">24</span>
<span class="row-1">男</span>
<span class="row-1">18772351259</span>
<span class="row-1">浙江西湖</span>
</div>

<div class="grid-item">
<span class="row-1">lisishan</span>
<span class="row-1">23</span>
<span class="row-1">女</span>
<span class="row-1">17682317584</span>
<span class="row-1">浙江余杭</span>
</div> -->

</div>
</div>

</div>
<!--分页插件-->
<div class="tcdPageCode"></div>

</div>

<script type="text/javascript">
var options;
/**初始函数
* [initdata description]
* @return {[type]} [description]
*/
function initdata(page){

$.ajax({
type: "get",
url: "http://localhost:8080/userInfo/getUserInfoByPage?pageNum="+page,
success: function(data, textStatus){
if(data.status == 1){
var result = data.userInfoList;
var total = data.totalPage;
localStorage.setItem("total",total);
/* alert(totalPage);
alert(result);*/
var cHtml="";
for(var i=0;i<result.length;i++){
cHtml+='<div class="grid-item">\
<span class="row-1">'+result[i].username+'</span>\
<span class="row-1">'+result[i].age+'</span>\
<span class="row-1">'+result[i].sex+'</span>\
<span class="row-1">'+result[i].phone+'</span>\
<span class="row-1">'+result[i].address+'</span>\
</div>'

}
$(".grid-body").html(cHtml);
}

},
complete: function(XMLHttpRequest, textStatus){

},
error: function(){
alert("请求网络失败！。。。。。。");
}
});
}

/**模糊搜索
* [search description]
* @return {[type]} [description]
*/
function search(){
var nicheng =document.getElementById("nicheng").value;
$('.grid-item').remove();

$.ajax({
type: "get",
url: "http://localhost:8080/userInfo/getUserInfoByName?username="+nicheng,
success: function(data, textStatus){
if(data.status == 1){
var addHtml = "";
var result = data.userlist;
for (var j =0;j<data.userlist.length;j++) {

addHtml+='<div class="grid-item">\
<span class="row-1">'+result[j].username+'</span>\
<span class="row-1">'+result[j].age+'</span>\
<span class="row-1">'+result[j].sex+'</span>\
<span class="row-1">'+result[j].phone+'</span>\
<span class="row-1">'+result[j].address+'</span>\
</div>'

}
$(".grid-body").html(addHtml);
}

},
complete: function(XMLHttpRequest, textStatus){

},
error: function(){
alert("请求网络失败！。。。。。。");
}
});
}

</script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.page.js"></script>
<script>

var page=localStorage.getItem("total");

$(".tcdPageCode").createPage({
pageCount:localStorage.getItem("total"),
current:1,
backFn:function(p){
initdata(p);//触发逻辑
}
});
</script>
</body>
</html>

其中运用了localStorage的缓存技术以及 jQuery的动态数据渲染的详细的实现步骤；
后台代码：

①mapper定义接口

<select id="getUserInfo" resultType="com.cckj.bean.UserInfo">
select * from userinfo
</select>

②controller实现分页逻辑

@RequestMapping(value = "/getUserInfoByPage", produces = "application/json;charset=utf-8")
public Map<String,Object> getUserInfoByPage(HttpServletResponse response ,
@RequestParam(required=false,defaultValue="1") Integer pageNum,
@RequestParam(required=false,defaultValue="3") Integer pageSize){
response.setHeader("Access-Control-Allow-Origin","*");
PageHelper.startPage(pageNum, pageSize); // 核心分页代码
List<UserInfo> userList = userInfoService.getUserInfo();
PageInfo pageInfo = new PageInfo(userList);
int pageCount = pageInfo.getPages();//总页数
Map<String,Object> map = new HashMap<>();
map.put("userInfoList",userList);
map.put("status",1);
map.put("totalPage",pageCount);
return map;
}

默认展示第1页，且每页数据为3条；

核心分页代码

PageHelper.startPage(pageNum, pageSize); // 核心分页代码

通过实例化 PageInfo得到分页后的总页数

PageInfo pageInfo = new PageInfo(userList);
int pageCount = pageInfo.getPages();

③分页后的json样本：

4.测试效果

第1页数据：



第2页数据：



第5页数据



好了，后台的分页逻辑与前端的分页显示结合的恰到好处；需要源码的朋友，及时私信我！我是张星，欢迎加入博主技术交流群，群号：313145288