SSM 通用分页 (PageHelper后台插件 + bootstrap前端布局)

1、后台代码

需要引入相应jar包，以及先实现service层的操作，返回Msg为工具包，在本文最后会贴出源码。

    @ResponseBody//点击分页查询考生数据(分页查询 json格式)
    @RequestMapping("/empsJson")
    public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue="1")Integer pn) {
        //使用PageHelper分页插件
        //查询之前只需要调用，传入页码，以及每页条数
        PageHelper.startPage(pn,10);
        //startPage后面紧跟的一个查询就是一个分页查询
        ArrayList<Emploree> emps = emploreeService.getAll();
        
        //使用pageInfo包装查询出来的结果,只需要把pageInfo交给页面
        //其中封装详细的分页信息
        PageInfo<Emploree> page = new PageInfo<Emploree>(emps,8);//连续显示的页数    
        
        return Msg.success().add("pageInfo", page);
    }

2、前端页面所需js

需要引入封装好的通用分页 pagingJS.js 文件，另外还需要自定义一个定制化表格js文件，如下模板

    var path = '';//项目路径
    //获取路径
    getPath();
    
    //ajax请求,获取相应分页数据
    function to_page(pn){
        
        $("#check_all").prop("checked",false);
        $.ajax({
            url:path+"paging",
            data:{
                "pn":pn,
                "type":1
            },
            type:"get",
            success:function(result){
                console.log(result);
                //1.解析并显示员工数据
                build_emps_table(result);
                //2.解析并显示分页信息
                build_page_info(result);
                //3.解析并显示分页条
                build_page_nav(result);
            }
        });
    }
    
　　 /*****************************************     定制化     ************************************************/
    //解析每条员工数据             
    function build_emps_table(result){
        //初始化清空数据
        $("#paging_table tbody").empty();
        
        var emps = result.extend.pageInfo.list;
        $.each(emps,function(index,item){
            var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
            var empIdTd = $("<td></td>").append(item.id);
            var empNameTd = $("<td></td>").append(item.name);
            var empSexTd = $("<td></td>").append(item.sex== 0 ?"男":"女");
            var empDeptTd = $("<td></td>").append(item.dept);
            var empIdcardTd = $("<td></td>").append(item.idcard);
            var empLicenseTd = $("<td></td>").append(item.license);
            var empPhotoTd = $("<td></td>").append(item.photo);
    
            var editSpan = $("<span></span>").addClass("glyphicon glyphicon-pencil").css("font-size","9px");
            
            //为编辑按钮添加一个自定义属性，用来存放员工id
            var editBtn = $("<button></button>").addClass("btn btn-primary btn-xs edit_btn")
                                                .append(editSpan)
                                                .append("编辑");
            //为编辑按钮添加一个自定义属性，用来存放员工id
            editBtn.attr("edit_id",item.id);
            
            var delSpan = $("<span></span>").addClass("glyphicon glyphicon-trash").css("font-size","9px");
            var delBtn = $("<button></button>").addClass("btn btn-danger btn-xs delete_btn")
                                                .append(delSpan)
                                                .append("删除");
            //为删除按钮添加一个自定义属性，用来存放员工id
            delBtn.attr("delete_id",item.id);
            var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
            
            $("<tr></tr>").append(checkBoxTd)
                        .append(empIdTd)
                        .append(empNameTd)
                        .append(empSexTd)
                        .append(empDeptTd)
                        .append(empIdcardTd)
                        .append(empLicenseTd)
                        .append(empPhotoTd)
                        .append(btnTd)
                        .appendTo("#paging_table tbody");
            
        });
    }
    

3、前端页面布局

注意：<table>标签一点要加   id="paging_table"   否则分页功能不生效

　　　　<!-- 表格 -->
       <div class="row" style="padding: 0 15px;">
          <table class="table table-striped table-bordered table-hover" id="paging_table">
            <thead>
              <tr><!-- 姓名、性别、所在单位（航空公司）、身份证号码、执照号码 -->
                <th  width="20px">
                  <input type="checkbox" id="check_all"></th>
                <th>考生ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>所在单位</th>
                <th>身份证号</th>
                <th>执照号码</th>
                <th>照片</th>
                <th>操作</th></tr>
            </thead>
            <tbody>
              <c:forEach items="${pageInfo.getList() }" var="item">                  
                  <tr>
                    <td>
                      <input type="checkbox"  class="check_item">
                    </td>
                    <td>${item.id }</td>
                    <td>${item.name }</td>
                    <td>
                        <c:choose> 
                            <c:when test="${item.sex==0 }">男</c:when>      
                            <c:otherwise>女</c:otherwise> 
                        </c:choose>
                    </td>
                    <td>${item.dept }</td>
                    <td>${item.idcard }</td>
                    <td>${item.license }</td>
                    <td>${item.photo }</td>
                    <td class="center">
                        <button class="btn btn-primary btn-xs edit_btn" edit_id="${item.id }">
                            <span class="glyphicon glyphicon-pencil" style="font-size: 9px;"></span>编辑
                        </button> 
                        <button class="btn btn-danger btn-xs delete_btn" delete_id="${item.id }">
                            <span class="glyphicon glyphicon-trash" style="font-size: 9px;"></span>删除
                        </button>
                  </tr>
              </c:forEach>
            </tbody>
          </table>
       </div>
       
       <!-- ******************************    以下为通用分页模块，无需改动     ************************************* -->
       <div class="row">   
             <div id="show_page_info" class="col-md-4" style="line-height: 80px;">
                     当前${pageInfo.getPageNum() }页,总${pageInfo.getPages() }页,总共${pageInfo.getTotal() }条记录
             </div>
          <div id="show_page_nav" class="col-md-8 text-right">
            <nav aria-label="Page navigation">
              <ul class="pagination" id="pagination">
                <li class="disabled" jumpPageNum="1"><a href="javascript:;">首页</a></li>
                <li class="disabled" jumpPageNum="1">
                    <a href="javascript:;"><span>&laquo;</span></a>
                </li>
              
                <c:forEach items="${pageInfo.getNavigatepageNums() }" var="item">
                    <li <c:if test="${item == 1 }"> class="active"</c:if>  jumpPageNum="${item }">
                        <a href="javascript:;">${item }</a>
                    </li>
                </c:forEach>
                
                <li jumpPageNum="${pageInfo.getPageNum()+1 }">
                  <a href="javascript:;"><span>&raquo;</span></a>
                </li>
                <li jumpPageNum="${pageInfo.getPages() }"><a href="javascript:;">末页</a></li>
              </ul>
            </nav>
          </div>  
        </div>

4、相关文件源码

pagingJS.js 

//总记录数
var totalRecord;
//当前页
var currentPage;

function getPath(){
    var urlinfo=window.location.href; //获取当前页面的url
    var offset1=urlinfo.split("/",4);
    path = '';
    
    offset1.forEach( function(e) {
        path = path + e +"/";
    });
    console.log(path);
    
}

//页面加载完成后，发送ajax请求，拿到分页数据
//to_page(1);
                           

//解析分页信息
function build_page_info(result){
    //初始化清空数据
    $("#show_page_info").empty();
    
    $("#show_page_info").append("当前"+result.extend.pageInfo.pageNum+"页,总"+result.extend.pageInfo.pages+"页,总共"+result.extend.pageInfo.total+"条记录");
    
    totalRecord = result.extend.pageInfo.total;
    currentPage = result.extend.pageInfo.pageNum;
}

//解析分页条信息
function build_page_nav(result){
    //初始化清空数据
    $("#show_page_nav").empty();
    
    var ul = $("<ul></ul>").addClass("pagination");
    var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","javascript:;"));
    var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;").attr("href","javascript:;"));
    var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;").attr("href","javascript:;"));
    var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","javascript:;"));
    //判断首页和上一页、下一页和末页是否可操作
    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);
        });
    }
    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,item){
        var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href","javascript:;"));
        if(result.extend.pageInfo.pageNum == item){
            numLi.addClass("active");
        }
        numLi.click(function(){
            to_page(item);
        });
        ul.append(numLi);
    });
    
    //添加下一页和末页
    ul.append(nextPageLi).append(lastPageLi);
    
    //把ul添加到nav
    var nav = $("<nav></nav>").append(ul);
    nav.appendTo("#show_page_nav");
}

//点击页码，局部刷新
$(document).on("click","#pagination li",function(){
        to_page($(this).attr("jumpPageNum"));

});



//完成全选/全不选功能
$("#check_all").click(function(){
    //attr获取checked是undefined
    //dom的原生用prop修改并获取，attr获取自定义属性
    $(".check_item").prop("checked",$(this).prop("checked"));
});

//check_item选择功能
$(document).on("click",".check_item",function(){
    //判断当前是否选中10个
    var flag = $(".check_item:checked").length == $(".check_item").length;
    $("#check_all").prop("checked",flag);
});

//查询为空，显示提示    
function noDataShow (dom) {
    var Dom = dom 
    $("<h1></h1>").addClass('text-center').prop("id","showData")
                  .css('marginTop', '60px')
                  .text("暂无符合条件的查询结果")
                  .appendTo(Dom);
}

Msg.java

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * 通用返回类
 * @Description: TODO
 * @author 王成
 * @date 2018年6月15日上午11:21:20
 */

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Msg {
    //状态码      200-成功    500-失败
    private int code;
    
    //提示信息
    private String msg;
    
    //用户要返回给浏览器的数据
    private Map<String, Object> extend = new HashMap<String, Object>();

    public static Msg success() {
        Msg result = new Msg();
        result.setCode(200);
        result.setMsg("处理成功！");
        return result;
    }
    public static Msg fail() {
        Msg result = new Msg();
        result.setCode(500);
        result.setMsg("处理失败！");
        return result;
    }
    public Msg add(String key,Object value) {
        this.getExtend().put(key, value);
        return this;
    }
}