採用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，歡迎大家體驗。