采用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，欢迎大家体验。