mybatis结合bootstrap分页插件的使用

      在很多的项目开发中都会用到分页这个功能，如何使用它是我们所关心的事。如果持久层采用mybatis，mybatis对分页有很好的集成，它的分页插件可以快速帮助我们进行分页处理，省去了以往的自己创建分页的封装类。以下是我对mybatis在ssm框架中的使用具体过程。

1、    引入pageHelper分页插件，导入所需的jar包

    <dependency>

      <groupId>com.github.pagehelper</groupId>      

      <artifactId>pagehelper</artifactId>

      <version>5.0.0</version>  

  </dependency>

 

2、在mybatis的全局配置中去注册这个插件

<!-- 分页插件 -->

   <plugins>

      <plugin interceptor="com.github.pagehelper.PageInterceptor">

      <!--分页参数合理化 -->

      <property name="reasonable" value="true"/>

      </plugin>

   </plugins>

 

3、在查询之前只需要调用，传入页码，以及每页的大小，startPage后面紧跟的这个查询就是一个分页查询

    PageHelper.startPage(pageNum,pageSize);

4、 使用pageInfo包装查询后的结果，只需要将pageInfo交给页面就行了。封装了详细的分页信息,包括有我们查询出来的数据，传入连续显示的页数

PageInfo page= new PageInfo(List list,int navigatePages);

包装Page对象

Parameters:

list page结果

navigatePages页码数量

例：使用分页查询将员工信息以每页5条记录，且连续显示5页。

public String getEmps(

       //从前台获取PageNum，如果为空，默认为1

      @RequestParam(value = "pn",  defaultValue = "1") Integer pn,Model model) {

       // 在查询之前只需要调用，传入页码，以及每页的大小为5

          PageHelper.startPage(pn, 5);

       //startPage后面紧跟的这个查询就是一个分页查询

        List<Employee> emps = employeeService.getAll();

        // 使用pageInfo包装查询后的结果，只需要将pageInfo交给页面就行了。

        // 封装了详细的分页信息,包括有我们查询出来的数据，传入连续显示的页数

              PageInfo page = new PageInfo(emps, 5);

              model.addAttribute("pageInfo", page);

              return "list";

         }

附：

5、结合前面的从控制层传过来的数据，如何在前台页面显示，达到预期的效果是我们最关注的事情，在这里我结合BootStrap的分页插件，采用两种方式实现了下面的效果。

结合bootstrap提供的样式：

第一种（使用jstl）：

使用之前导入相应的js和css

                                         

	<!-- 显示分页信息 -->
	<div class="row">
		<!--分页文字信息  -->
		<div class="col-md-6">当前 ${pageInfo.pageNum }页,总${pageInfo.pages }
			页,总 ${pageInfo.total } 条记录</div>
		<!-- 分页条信息 -->
		<div class="col-md-6">
			<nav aria-label="Page navigation">
			<ul class="pagination">
				<li><a href="${pageContext.request.contextPath }/emps?pn=1">首页</a></li>
				<c:if test="${pageInfo.hasPreviousPage }">
					<li><a href="${pageContext.request.contextPath }/emps?pn=${pageInfo.pageNum-1}"
						aria-label="Previous"> <span aria-hidden="true">«</span>
					</a></li>
				</c:if>

				<c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
					<c:if test="${page_Num == pageInfo.pageNum }">
						<li class="active"><a href="#">${page_Num }</a></li>
					</c:if>
					<c:if test="${page_Num != pageInfo.pageNum }">
						<li><a href="${pageContext.request.contextPath }/emps?pn=${page_Num }">${page_Num }</a></li>
					</c:if>

				</c:forEach>
				<c:if test="${pageInfo.hasNextPage }">
					<li><a href="${pageContext.request.contextPath }/emps?pn=${pageInfo.pageNum+1 }"
						aria-label="Next"> <span aria-hidden="true">»</span>
					</a></li>
				</c:if>
				<li><a href="${pageContext.request.contextPath }/emps?pn=${pageInfo.pages}">末页</a></li>
			</ul>
			</nav>
		</div>
	</div>

第二种(ajax)：

	
<!-- 显示分页信息 -->
<div class="row">
	<!--分页文字信息  -->
	<div class="col-md-6" id="page_info_area"></div>
	<!-- 分页条信息 -->
	<div class="col-md-6">
	    <nav aria-label="Page navigation" id="page_nav_area"></nav>
	</div>
</div>

<script type="text/javascript">
	$(function(){
		//去首页
		to_page(1);
	});
	function to_page(pn){
		$.ajax({
			url:"${pageContext.request.contextPath }/emps",
			data:"pn="+pn,
			type:"GET",
			success:function(result){
				//console.log(result);
				//显示分页信息
				build_page_info(result);
				//显示分页导航栏
				build_page_nav(result);
			}
		});
	}
	
	function build_page_info(result){
		$("#page_info_area").empty();
		$("#page_info_area").append("当前"+result.extend.pageInfo.pageNum+
				"页,总"+result.extend.pageInfo.pages+
				"页,总"+result.extend.pageInfo.total+"条记录")
		}
	function build_page_nav(result){
		$("#page_nav_area").empty();
		var ul=$("<ul></ul>").addClass("pagination");
		var firstPageLi=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
		var prePageLi=$("<li></li>").append($("<a></a>").append("«"));
		//当为第一页时，首页导航栏禁用
		if(result.extend.pageInfo.hasPreviousPage==false){
		 	firstPageLi.addClass("disabled");
		 	prePageLi.addClass("disabled");
		}else{
		 	firstPageLi.click(function(){
		 		to_page(1);
		 	});
		 	prePageLi.click(function(){
		 		to_page(result.extend.pageInfo.pageNum-1);
		 	});
		}
		var nextPageLi=$("<li></li>").append($("<a></a>").append("»"));
		var lastPageLi=$("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
		//当为最后一页时，末页禁用
		if(result.extend.pageInfo.hasNextPage==false){
		 	nextPageLi.addClass("disabled");
		 	lastPageLi.addClass("disabled");
		}else{
		 	nextPageLi.click(function(){
		 		to_page(result.extend.pageInfo.pageNum+1);
		 	});
		 	lastPageLi.click(function(){
		 		to_page(result.extend.pageInfo.pages);
		 	});
		}
		ul.append(firstPageLi).append(prePageLi);
		
		$.each(result.extend.pageInfo.navigatepageNums,function(index,ele){
		 	var navPageLi=$("<li></li>").append($("<a></a>").append(ele).attr("href","#"));
		 	//让当前页码高亮显示
		 	if(result.extend.pageInfo.pageNum==ele){
		 		navPageLi.addClass("active");
		 	}
		 	navPageLi.click(function(){
		 		to_page(ele);
		 	});
		 	ul.append(navPageLi);
		});
		
		ul.append(nextPageLi).append(lastPageLi);
		var navPage=$("<nav></nav>").append(ul);
		navPage.appendTo("#page_nav_area");
	}
</script>