Loading

使用Mybatis插件 PageHelper 模拟百度分页(Day_20)

 

生活中,要学会沉淀生命,沉淀心情,沉淀自己

 


 

模拟百度分页最终实现效果如图:

 

 

 

 

 

 

 

本篇博客运行环境

JDK8 + IntelliJ IDEA 2018.3 + Tomcat 8.5.31

 

准备好了我们就开始吧!

 

首先我们要引入pagehelper 所需的依赖,我们直接在 pom.xml 中增加 jar 包依赖:

 

1 <!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper -->
2     <dependency>
3       <groupId>com.github.pagehelper</groupId>
4       <artifactId>pagehelper</artifactId>
5       <version>5.2.0</version>
6     </dependency>

 

也可在官网直接搜索复制

 

 

  • 第二步,配置相关环境

在 MyBatis 的 SessionFactory 配置中新增加一个属性名 plugins 的配置:

 

 1 <!--配置mybatisplus 插件-->
 2         <property name="plugins">
 3             <array>
 4                 <bean class="com.github.pagehelper.PageInterceptor">
 5                     <property name="properties">
 6                         <!-- Dialect:  方言 mysql Oracle SqlServer,
 7                              helperDialect = mysql:告诉pageHelper是什么数据库
 8                              reasonable=true  : 使得分页信息合理化
 9                         -->
10                         <value>
11                             helperDialect=mysql
12                             reasonable=true
13                             supportMethodsArguments=true
14                             params=count=countSql
15                             autoRuntimeDialect=true
16                         </value>
17                     </property>
18                 </bean>
19             </array>
20         </property>
  • 以上代码相关参数有注释,

 

  • 第三,我定义了一个工具类,用来保存分页所需两个参数

 

  • 定义查询数据的接口以及service

 

 

 

 

 

 

 

 

在这之前我们需要在前台完成我们分页条的设计,这里可以直接引入 Bootstrap 来完成:

 

 

 

 

 

 

 

  • 重点来了,我们要实现百度分页之前要了解的:

 

 

 

 

分析百度分页的效果及其算法
效果 如何实现
上一页,下一页,中间恒定为10个数字按钮
begin="1" end="10"
当前页码《=6,最后页码数字仍是10    进行判断
当前页码》6,当前页码保持居中前一位
begin="pageInfo.pageNum-5" end="pageInfo.pageNum+4"

第一个按钮的数值为:

   num-5

最后一个按钮的数值为:

   num+4

总页数少于10时,中间则不能有十个数字按钮   进行判断
尾页数不能超过总页数
pageInfo.pages<=(pageInfo.pageNum+4)

当前是第一页时,隐藏上一页和首页,当前是最后一页时,隐藏尾页和下一页按钮

  进行判断

 

 

 

当我们分析了实现模拟百度分页所需条件后,那么实现也就简简单单了。

 

下面是实现的算法

 

  1  <%--分页--%>
  2     <div>
  3         <nav aria-label="Page navigation example">
  4             <ul class="pagination justify-content-center">
  5 
  6 
  7                 <%--当前页码大于1则显示首页以及上一页按钮--%>
  8                 <c:if test="${pageInfo.pageNum>1}">
  9                     <li class="page-item">
 10                         <a class="page-link" href="${pageContext.request.contextPath}/jsp/user/query?pageNum=1">首页</a>
 11                     </li>
 12                     <li class="page-item">
 13                         <a class="page-link" href="${pageContext.request.contextPath}/jsp/user/query?pageNum=${pageInfo.prePage}" tabindex="-1" aria-disabled="true">上一页</a>
 14                     </li>
 15                 </c:if>
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27                 <c:choose>
 28                     <c:when test="${pageInfo.pageNum<=6}">
 29                         <c:if test="${pageInfo.pages<10}">
 30                         <c:forEach var="num" begin="1" end="${pageInfo.pages}">
 31                             <c:choose>
 32                                 <c:when test="${pageInfo.pageNum==num}">
 33                                     <li class="page-item active">
 34                                         <a class="page-link" href="${pageContext.request.contextPath}/jsp/user/query?pageNum=${num}">${num}</a>
 35                                     </li>
 36                                 </c:when>
 37                                 <c:otherwise>
 38                                     <li class="page-item">
 39                                         <a class="page-link" href="${pageContext.request.contextPath}/jsp/user/query?pageNum=${num}" >${num}</a>
 40                                     </li>
 41                                 </c:otherwise>
 42                             </c:choose>
 43 
 44                         </c:forEach>
 45                         </c:if>
 46 
 47                         <%--若总页数大于十页,则显示1~10 的页码--%>
 48                         <c:if test="${pageInfo.pages>=10}">
 49                             <c:forEach var="num" begin="1" end="10">
 50                                 <c:choose>
 51                                     <c:when test="${pageInfo.pageNum==num}">
 52                                         <li class="page-item active">
 53                                             <a class="page-link" href="${pageContext.request.contextPath}/jsp/user/query?pageNum=${num}">${num}</a>
 54                                         </li>
 55                                     </c:when>
 56                                     <c:otherwise>
 57                                         <li class="page-item">
 58                                             <a class="page-link" href="${pageContext.request.contextPath}/jsp/user/query?pageNum=${num}" >${num}</a>
 59                                         </li>
 60                                     </c:otherwise>
 61                                 </c:choose>
 62 
 63                             </c:forEach>
 64                         </c:if>
 65                     </c:when>
 66                     <c:otherwise>
 67                         <c:choose>
 68                             <c:when test="${pageInfo.pages<=(pageInfo.pageNum+4)}">
 69                                 <c:forEach var="num" begin="${pageInfo.pages-9}" end="${pageInfo.pages}">
 70                                     <c:choose>
 71                                         <c:when test="${pageInfo.pageNum==num}">
 72                                             <li class="page-item active">
 73                                                 <a class="page-link" href="${pageContext.request.contextPath}/jsp/user/query?pageNum=${num}" >${num}</a>
 74                                             </li>
 75                                         </c:when>
 76                                         <c:otherwise>
 77                                             <li class="page-item">
 78                                                 <a class="page-link" href="${pageContext.request.contextPath}/jsp/user/query?pageNum=${num}" >${num}</a>
 79                                             </li>
 80                                         </c:otherwise>
 81                                     </c:choose>
 82                                 </c:forEach>
 83                             </c:when>
 84                             <c:otherwise>
 85                                 <c:forEach var="num" begin="${pageInfo.pageNum-5}" end="${pageInfo.pageNum+4}">
 86                                     <c:choose>
 87                                         <c:when test="${pageInfo.pageNum==num}">
 88                                             <li class="page-item active">
 89                                                 <a class="page-link" href="${pageContext.request.contextPath}/jsp/user/query?pageNum=${num}" tabindex="-1" aria-disabled="true">${num}</a>
 90                                             </li>
 91                                         </c:when>
 92                                         <c:otherwise>
 93                                             <li class="page-item">
 94                                                 <a class="page-link" href="${pageContext.request.contextPath}/jsp/user/query?pageNum=${num}" tabindex="-1" aria-disabled="true">${num}</a>
 95                                             </li>
 96                                         </c:otherwise>
 97                                     </c:choose>
 98                                 </c:forEach>
 99                             </c:otherwise>
100                         </c:choose>
101                     </c:otherwise>
102                 </c:choose>
103 
104 
105 
106                 <%--当前页码小于总页数时才显示下一页--%>
107                 <c:if test="${pageInfo.pageNum<pageInfo.pages}">
108                     <li class="page-item">
109                         <a class="page-link" href="${pageContext.request.contextPath}/jsp/user/query?pageNum=${pageInfo.nextPage}">下一页</a>
110                     </li>
111                     <li class="page-item">
112                         <a class="page-link" href="${pageContext.request.contextPath}/jsp/user/query?pageNum=${pageInfo.pages}">尾页</a>
113                     </li>
114                 </c:if>
115 
116 
117 
118 
119 
120             </ul>
121         </nav>
122     </div>
123 
124     <%--分页结束--%>

 

 

  • 最后实现结果:

 

 

 

 

 

 

 

 

 

  • 总结

博客写完后还是未达到自己的一个预期,效果也有些不尽其意。

前面是我一些自己的思路与步骤,篇幅问题不够详细,

不过最后的算法还是可取的,可以只参考算法。

若要我之前写的SSM项目 - 超市管理系统可以私信我。

 

 

 

 

 

 

 

 

 

 

 

 
posted @ 2020-12-16 11:04  A零号  阅读(190)  评论(0编辑  收藏  举报