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>«</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>»</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("«").attr("href","javascript:;")); var nextPageLi = $("<li></li>").append($("<a></a>").append("»").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; } }