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>