采用PageHelper插件实现SSM之JSP分页效果

PageHelper是一款非常强大的分页组件，Github地址：https://github.com/pagehelper/Mybatis-PageHelper/，在采用SSM项目中，非常容易集成，具体过程如下：

第一步，引入pom.xml中，代码如下：

<!--pagehelper分页组件 --> <!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.1.2</version> </dependency>

第二步，在mybatise的配置文件中引入，代码如下：

<?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> <typeAliases> <typeAlias type="com.qunhong.model.User" alias="User" /> </typeAliases> //注意放最下面 <plugins> <!-- com.github.pagehelper为PageHelper类所在包名 --> <plugin interceptor="com.github.pagehelper.PageInterceptor"> <property name="reasonable" value="true" /> </plugin> </plugins> </configuration>

第三步，在控制器中引入代码如下：

/** * 分页查询功能 * @param pageNo * @return */ @RequestMapping(value = "/userlist", method = RequestMethod.GET) public ModelAndView userList(@RequestParam(value = "pageNo", defaultValue = "1") Integer pageNo) { ModelAndView modelAndView = new ModelAndView("user/userPage"); PageHelper.startPage(pageNo, 20); List<User> users = userService.userList(); //查询全部数据 PageInfo<User> pageInfo = new PageInfo<>(users,10); modelAndView.addObject("pageInfo",pageInfo); return modelAndView; }

第三步，在JSP页面采用bootstrap分页组件来实现，界面效果和业务逻辑代码如下：

<!-- 分页进度条 --> <div class="panel-body"> <div class="row"> <div class="col-md-6" style="line-height: 30px;"> 当前第<span class="badge">${pageInfo.pageNum}</span>页，共有<span class="badge">${pageInfo.pages}</span>页，总记录数<span class="badge">${pageInfo.total}</span>条。 </div> <div class="col-md-6"> <nav aria-label="Page navigation" class="pull-right"> <ul class="pagination pagination-sm" style="margin: 0px;"> <li><a href="${pageContext.request.contextPath}/user/userlist?pageNo=1">首页</a> </li> <c:if test="${pageInfo.pageNum==1}"> <li class="disabled"> <a href="#" aria-label="Previous" class="prePage"> <span aria-hidden="true">上一页</span> </a> </li> </c:if> <c:if test="${pageInfo.pageNum!=1}"> <li> <a href="#" aria-label="Previous" class="prePage"> <span aria-hidden="true">上一页</span> </a> </li> </c:if> <c:forEach items="${pageInfo.navigatepageNums}" step="1" var="itemPage"> <c:if test="${pageInfo.pageNum == itemPage}"> <li class="active"> <a href="${pageContext.request.contextPath}/user/userlist?pageNo=${itemPage}">${itemPage}</a> </li> </c:if> <c:if test="${pageInfo.pageNum != itemPage}"> <li> <a href="${pageContext.request.contextPath}/user/userlist?pageNo=${itemPage}">${itemPage}</a> </li> </c:if> </c:forEach> <c:if test="${pageInfo.pageNum == pageInfo.pages}"> <li class="disabled" class="nextPage"> <a href="#" aria-label="Next"> <span aria-hidden="true">下一页</span> </a> </li> </c:if> <c:if test="${pageInfo.pageNum != pageInfo.pages}"> <li> <a href="#" aria-label="Next" class="nextPage"> <span aria-hidden="true">下一页</span> </a> </li> </c:if> <li><a href="${pageContext.request.contextPath}/user/userlist?pageNo=${pageInfo.pages}">尾页</a> </li> </ul> </nav> </div> </div> </div> <!-- 业务处理 --> <script type="text/javascript"> //处理上下页 $(function () { //上一页 var curPage = ${ pageInfo.pageNum }; var totalPages = ${ pageInfo.total }; $(".prePage").click(function () { if (curPage > 1) { var pageNo = curPage - 1; $(this).attr("href", "${pageContext.request.contextPath}/user/userlist?pageNo=" + pageNo); } }); //下一页 $(".nextPage").click(function () { if (curPage < totalPages) { var pageNo = curPage + 1; $(this).attr("href", "${pageContext.request.contextPath}/user/userlist?pageNo=" + pageNo); } }); }) </script>

第四步，测试无误后最终效果如下：

 

至此，集成PageHelper插件实现JSP页面分页效果就完美的解决了。

 

 

另附，推荐给大家一款非常好用的面试APP，欢迎大家体验。

mapboo 认证博客专家 博客专家 在线讲师 软件架构师 多年一线开发岗位编程，涉足移动平台开发（iOS/Android）、Java后端开发、前端开发以及APP逆向安全等相关技术，在线讲师，群鸿课堂创始人，信息系统项目管理师。