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);

*{ 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>

後臺程式碼：

①mapper定義介面

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

@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 = new PageInfo(userList);
int pageCount = pageInfo.getPages();

4.測試效果

第1頁資料：

第2頁資料：

第5頁資料

好了，後臺的分頁邏輯與前端的分頁顯示結合的恰到好處；需要原始碼的朋友，及時私信我！我是張星，歡迎加入博主技術交流群，群號：313145288