PageHelper分页的学习（二）
PageHelper分页的学习（二）
继续上一节的学习，上一节是将基本的分页转换实现了，但是没有页面的互动的状况，每一次想要改变数据表格的信息就需要改变url中的参数的数据，但是现在在这一节，使用分页栏进行互动，实现更加方便的数据表格转换。
如图，实现的效果就像是这种，这里只是测试，没有设计好的样式。（丑归丑，但是会了技术就行，样式这个不难）
那如何实现呢？首先你的现有一个盒子模板，这是我设计的html代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>样式的设计</title> <link rel="stylesheet" type="text/css" href="css/styledesign.css"/> </head> <body style="margin-top: 200px; margin-left: 600px;"> <a href=""> <div class="per" style="font-size: 12px;"> << </div> </a> <a href=""> <div class="per" style="font-size: 12px;"> 首页 </div> </a> <a href=""> <div class="per"> 1 </div> </a> <a href=""> <div class="per"> 2 </div> </a> <a href=""> <div class="per"> 3 </div> </a> <a href=""> <div class="per"> 4 </div> </a> <a href=""> <div class="per"> 5 </div> </a> <a href=""> <div class="per"> 6 </div> </a> <a href=""> <div class="per" style="font-size: 12px;"> 尾页 </div> </a> <a href=""> <div class="per" style="font-size: 12px;"> >> </div> </a> </body> </html>
.per { width: 30px; height: 30px; background-color: white; float: left; color: #5E5E5E; border: 1px solid darkgray; text-align: center; line-height: 30px; }
结果如图：
那现在就拿这个模板就放在jsp页面中进行做出改变。
在我的html代码中会看到，数字变换的部分是需要循环输出的，而剩下的首页、尾页、<<、>>这些都是唯一存在的，所以在jsp页面中使用jstl代码的foreach实现循环。
上代码：（这次只有jsp的代码）
<%-- 分页的操作 --%>
<div style="margin-top: 300px;">
<a href="${pageContext.request.contextPath}/admin/splitpage/${requestScope.pageInfo.prePage}">
<div class="per" style="font-size: 12px;">
<<
</div>
</a>
<a href="${pageContext.request.contextPath}/admin/splitpage/1">
<div class="per" style="font-size: 12px;">
首页
</div>
</a>
<c:forEach begin="1" end="${requestScope.pageInfo.pages}" var="indexPage">
<a href="${pageContext.request.contextPath}/admin/splitpage/${indexPage}">
<c:if test="${requestScope.pageInfo.pageNum == indexPage}">
<div class="per" style="background-color: dodgerblue">
${indexPage}
</div>
</c:if>
<c:if test="${requestScope.pageInfo.pageNum != indexPage}">
<div class="per">
${indexPage}
</div>
</c:if>
</a>
</c:forEach>
<a href="${pageContext.request.contextPath}/admin/splitpage/${requestScope.pageInfo.pages}">
<div class="per" style="font-size: 12px;">
尾页
</div>
</a>
<a href="${pageContext.request.contextPath}/admin/splitpage/${requestScope.pageInfo.nextPage}">
<div class="per" style="font-size: 12px;">
>>
</div>
</a>
</div>
那都是啥意思呢？不懂，没事儿，咱就一个一个分析呗！
<%-- 分页的操作 --%>
<div style="margin-top: 300px;">
<%--================================第一部分===================================--%>
<a href="${pageContext.request.contextPath}/admin/splitpage/${requestScope.pageInfo.prePage}">
<div class="per" style="font-size: 12px;">
<<
</div>
</a>
<a href="${pageContext.request.contextPath}/admin/splitpage/1">
<div class="per" style="font-size: 12px;">
首页
</div>
</a>
<%--================================第二部分===================================--%>
<c:forEach begin="1" end="${requestScope.pageInfo.pages}" var="indexPage">
<a href="${pageContext.request.contextPath}/admin/splitpage/${indexPage}">
<c:if test="${requestScope.pageInfo.pageNum == indexPage}">
<div class="per" style="background-color: dodgerblue">
${indexPage}
</div>
</c:if>
<c:if test="${requestScope.pageInfo.pageNum != indexPage}">
<div class="per">
${indexPage}
</div>
</c:if>
</a>
</c:forEach>
<%--================================第三部分===================================--%>
<a href="${pageContext.request.contextPath}/admin/splitpage/${requestScope.pageInfo.pages}">
<div class="per" style="font-size: 12px;">
尾页
</div>
</a>
<a href="${pageContext.request.contextPath}/admin/splitpage/${requestScope.pageInfo.nextPage}">
<div class="per" style="font-size: 12px;">
>>
</div>
</a>
</div>
分了三个部分：第一个部分是：<<、首页；第二个部分是：各个数据的循环输出；第三部分是：>>、尾页；
第一个部分和第三个部分是不能循环的，唯一存在。
中间的第二部分使用了两个if判断，主要作用是用于实现按钮的颜色改变，比如：切换到第三页，那么第三页就是蓝色的，其余的不是蓝色的。逻辑也很简单，使用PageInfo中的pageNum去与当前的页面数进行判断，如果是==则颜色改变为蓝色；反之，不是的就不改变颜色，只是把值遍历出来。（牛逼）
再看一下底层的代码是如何编写的，为啥可以通过一个数字参数就能实现页面的转换，其实底层我都做好了逻辑处理：
Controller类：
/** * 分页显示，显示第一页的5条数据 */ @RequestMapping("/splitpage/{startPage}") public String getStudentBySplitPage(HttpServletRequest request,@PathVariable int startPage) { PageInfo pageInfo = studentsService.getStudentBySplitService(startPage, PAGE_SIZE); request.setAttribute("pageInfo",pageInfo); return "splitPage"; }
使用RestFul风格接收参数，作为函数的接收参数，再去调用业务层的函数，并把这个相关的参数，传入到底层mapper，动态的添加LIMIT关键字，实现分页处理。
Service类：
/** * 通过分页查询数据 * @return */ public PageInfo getStudentBySplitService(int splitPage,int pageSize) { PageHelper.startPage(splitPage,pageSize); List<Students> allStudent = studentsMapper.getAllStudent(); PageInfo<Students> pageInfo = new PageInfo<Students>(allStudent); return pageInfo; }
mapper.xml文件：（切记，这里不要添加分号，否则后面动态添加LIMIT关键字会发生SQL冲突异常）
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > <mapper namespace="com.hui.mapper.StudentsMapper" > <select id="getAllStudent" resultType="com.hui.pojo.Students"> select * from splitpage.students </select> </mapper>
浙公网安备 33010602011771号