自寫的jQuery實現分頁功能的分頁組件：
功能效果如下：
分頁組件就是上圖中的三部分， 分別放在表格上部 和下部 。
其中，
1》》》頁面的代碼如下：
product.jsp
其中引用bootstrap.css 和bootstrap .js是必須的
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8" contentType="text/html; charset=UTF-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 3 4 5 <% 6 String path = request.getContextPath(); 7 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 8 %> 9 <!DOCTYPE HTML> 10 <html> 11 <head> 12 <meta charset="utf-8"> 13 <meta name="renderer" content="webkit|ie-comp|ie-stand"> 14 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 15 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 16 <meta http-equiv="Cache-Control" content="no-siteapp" /> 17 18 <link href="../css/H-ui.min.css" rel="stylesheet" type="text/css" /> 19 <link href="../css/H-ui.admin.css" rel="stylesheet" type="text/css" /> 20 <link href="../css/style.css" rel="stylesheet" type="text/css" /> 21 <link href="../lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" /> 22 <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 23 24 <title>產品列表</title> 25 <style type="text/css" > 26 .pageInfo{ 27 display: inline; 28 } 29 </style> 30 </head> 31 <body> 32 33 <nav class="breadcrumb" style="padding: 0px 1px 20px 0px;margin-bottom: 0px;"><i class="Hui-iconfont"></i> 首頁 <span class="c-gray en">></span> 基因信息管理 <span class="c-gray en">></span> 產品列表 <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont"></i></a></nav> 34 35 <div class="pd-20"> 36 <div class="text-c"> 37 <select class="select" id="" name="" style="width:250px"> 38 <option value="0">產品</option> 39 <option value="AccountInfo">基因型</option> 40 <option value="AdminInfo">關鍵字</option> 41 </select> 42 <button name="" id="" class="btn btn-success" type="submit"><i class="Hui-iconfont"></i> 查詢</button> 43 </div> 44 </div> 45 <div class="cl pd-5 bg-1 bk-gray mt-20"> 46 <span class="l"><a href="javascript:;" class="btn btn-danger radius"><i class="Hui-iconfont"></i> 批量刪除</a> 47 <a class="btn btn-primary radius" href="javascript:;"><i class="Hui-iconfont"></i> 添加產品</a></span> 48 </div> 49 50 51 <!-- 分頁 + table 從這里開始 由於樣式采用bootstrap，所以class樣式盡量使用一致的 --> 52 <div class="container"> 53 <!-- 分頁的第一部分 開始 --> 54 <div class="row" style="margin: 20px 0px 5px 10px;"> 55 <label class="pageInfo">每頁顯示 </label> 56 <select class="form-control pageInfo" style="width: 20%"> 57 <option>5</option> 58 <option selected="selected">10</option> 59 <option>20</option> 60 <option>50</option> 61 <option>100</option> 62 </select> 63 <label class="pageInfo">條</label> 64 </div> 65 <!-- 分頁的第一部分 結束 --> 66 <!-- table部分 開始 --> 67 <div class="row"><!-- 采用樣式row 分成一層 一層 --> 68 <table class="table table-hover table-bordered table-bg"> 69 <thead> 70 <tr class="text-c"> 71 <th width="25"><input type="checkbox" id="ch1">全選</th> 72 <th width="80">產品名稱</th> 73 <th width="280">操作</th> 74 </tr> 75 </thead> 76 <tbody> 77 </tbody> 78 </table> 79 </div> 80 <!-- table 部分結束 --> 81 <!-- 分頁 第二部分 開始 --> 82 <div class="row"> 83 <!-- 第二部分左邊部分開始 --> 84 <div class="pageInfo pull-left" style="position: relative;top: 32px; font-family: Times New Roman;">當前顯示第<label class="startInfo"></label>條到第<label class="endInfo"></label> 條，總共<label class="totalInfo"></label>條</div> 85 <!-- 第二部分右邊部分 開始 --> 86 <div class="pageInfo pull-right"> 87 <nav > 88 <ul class="pagination"> 89 <li> 90 <a href="#" aria-label="Previous" style="display: none"> 91 <span aria-hidden="true">«</span> 92 </a> 93 </li> 94 <li class="active"><a href="#">1</a></li> 95 <li> 96 <a href="#" aria-label="Next"> 97 <span aria-hidden="true">»</span> 98 </a> 99 </li> 100 </ul> 101 </nav> 102 </div> 103 </div> 104 <!-- 分頁第二部分 結束 --> 105 </div> 106 107 <script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script> 108 <script type="text/javascript" src="../lib/layer/1.9.3/layer.js"></script> 109 <script type="text/javascript" src="../lib/My97DatePicker/WdatePicker.js"></script> 110 <script type="text/javascript" src="../js/bootstrap.min.js"></script> 111 <script type="text/javascript" src="../lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 112 <script type="text/javascript" src="../js/H-ui.js"></script> 113 <script type="text/javascript" src="../js/H-ui.admin.js"></script> 114 <script type="text/javascript" src="../js/pageSet.js"></script> 115 <script type="text/javascript" src="../js/geneinfo/product/product.js"></script> 116 </body> 117 </html>
2》》》分頁組件的js文件
pageSet.js
1 var page = {}; // 定義分頁類 2 (// 這里用大括號將整個的類 包括【本類的屬性定義】【本類的方法】 整體括起來，是讓本類在頁面加載的時候就運行 3 4 // tt這個類的字段定義 5 function() { 6 page.bindData; 7 page = function page(url, bindData) { 8 this.pageNo = 1; // 當前頁 初始值為1 9 this.pageSize = 10; // 當前頁顯示多少條 10 this.startInfo = 1; // 開始條數 11 this.endInfo = 10; // 結束條數 12 this.totalPage = 0; // 總頁數 13 this.totalInfo = 0; // 總條數 14 this.tempLi = "<li><a href='#'></a></li>"; // 用於添加頁碼處使用 15 this.url = url; // 用於不同頁面的請求地址 16 this.result = null; // 用於可能僅需要正文數據時使用 17 this.bindData = bindData; 18 this.init(); 19 return this; 20 } 21 22 // 根據初始化的參數 bindData()綁定參數的方法 page初始化的對象 來請求后台，傳回 新的page信息 23 page.prototype.pageSet = function() { 24 $.post(page.url, { 25 "pageNo" : page.pageNo, 26 "pageSize" : page.pageSize 27 }, function(data) { 28 result = null; 29 data = eval("(" + data + ")"); 30 if (data != null && data != "" && data != undefined) { 31 page.pageNo = data.pageNum == 0 ? 1 : data.pageNum; 32 page.pageSize = data.pageSize == 0 ? page.pageSize : data.pageSize; 33 page.startInfo = data.pageNum == 0 ? 0 : (page.pageNo - 1) * page.pageSize + 1; 34 page.endInfo = page.startInfo + page.pageSize - 1; 35 page.endInfo = page.endInfo >= data.total ? data.total : page.endInfo; 36 page.totalPage = data.pages; 37 page.totalInfo = data.total; 38 page.result = data.list; 39 } 40 // 執行綁定參數的方法 41 bindData(); 42 // 如果總頁數 <=1 隱藏下一頁 43 if (page.totalPage <= 1) { 44 $("a[aria-label='Next']").hide(); 45 } 46 }); 47 } 48 49 // 設置分頁組件的 一些信息 eq:總共多少條 顯示第幾條~第幾條 動態顯示頁碼 50 page.prototype.setValue = function() { 51 $("label.startInfo").text(page.startInfo); // 為此三個元素賦值 52 $("label.endInfo").text(page.endInfo); 53 $("label.totalInfo").text(page.totalInfo); 54 var temp = ""; 55 if (page.totalPage != 0) { // 首先保證總頁數不是0頁 56 $(".pagination li").removeClass("active"); // 移除掉之前的 當前頁面 頁碼按鈕的 57 // 選中狀態 58 if (page.totalPage <= 5 59 && $(".pagination li").length != page.totalPage + 2) { // 【初始化總頁數小於5頁的情況】此處規定下面顯示的頁數就是5頁 如果總頁數<5則全部顯示》》》$(".pagination li").length !=page.totalPage + 2保證不會重復疊加 60 for (var i = 0; i < page.totalPage - 1; i++) { // 總頁數<5，則全部添加 61 temp += $(page.tempLi).find("a").text(i + 2).parent().prop("outerHTML"); // 為tempLi變量中的a標簽添加頁碼數 然后找到a標簽的父層 62 // 此時的它是Object類型，需要通過prop("outerHTML")這個屬性，獲取到HTML代碼，這樣才能用於追加進頁面 【 原生JS DOM里有一個內置屬性outerHTML】 63 } 64 page.cleanUp(); 65 $(".pagination li").eq(1).after(temp); // 並將動態生成的頁碼按鈕的HTML代碼 66 // 添加到li的第二個之后 67 // 【這里是eq(1)第二個是因為（上一頁）這個按鈕雖然屬性設為隱藏，但是依舊存在；而默認的還有一個第一頁這個頁碼是存在的。所以是兩個li，所以是eq(1)】 68 } else { // 否則，是總頁數>5的 69 var absCon = Math.abs($(".pagination li").eq(3).text()- page.pageNo); // 先獲取eq(3)也就是 中間位置的頁碼-當前頁 70 // 【點擊中間頁碼 靠后的頁碼按鈕的情況】如果當前頁>中間位置的頁碼數 && 中間位置的.length !=0 && 71 // （除了最后一個頁碼li之外的的最后一個li的文本）也就是倒數第二個的文本!=總頁數 【這里的判斷條件就是 72 // 如果點擊的是中間位置靠后的頁碼 eq:12345中的4或者5的話】 條件成立 73 if (page.pageNo > $(".pagination li").eq(3).text() 74 && $(".pagination li").eq(3).length != 0 75 && $(".pagination li:not(:last):last").text() != page.totalPage) { 76 absCon = page.totalPage - page.pageNo >= absCon ? absCon 77 : page.totalPage - page.pageNo; // 【當前頁就是即將要顯示的頁碼】如果 78 // 總頁數-當前頁>absCon 79 // 那么就給absCon原本的值，否則就將總頁數-當前頁的值賦值給absCon 80 for (var i = 0; i < absCon; i++) { // 此處absCon的作用： 81 // 點擊中間位置靠后的頁碼數，可能即將顯示的當前頁 82 // 是最后一頁了，那就不再添加新的頁碼出來了【eq:總共9頁，即將顯示的是第9頁，那9這個頁碼之后就不再新增加頁碼了】 83 // 然后將新增加的頁碼添加在最后一個li【此處的最后一個li是下一頁按鈕】之前 84 // ；要添加的內容就是新生成的li的HTML文本 【eval($(".pagination 85 // li").eq($(".pagination li").length - 2).text())+1 86 // 這里使用eval()將其中的內容括起來是為了獲取到的值直接和1相加】 87 $(".pagination li").last().before( 88 $(page.tempLi).find("a").text( 89 eval($(".pagination li").eq( 90 $(".pagination li").length - 2) 91 .text()) + 1).parent().prop( 92 "outerHTML")); 93 $(".pagination li").eq(1).remove(); // 並且在循環中始終刪除eq(1)也就是前一頁按鈕之后的第一個頁碼 94 } 95 } else { // 【初始化 頁數大於5頁的情況】如果 當前頁面上的li【包括上一頁，下一頁總共7個頁碼按鈕】!=7個 96 // && 當前頁面上的li個數 !=總頁數+2 【此處的總頁數是后台返回的總頁數】 97 if ($(".pagination li").length != 7 98 && $(".pagination li").length != page.totalPage + 2) { 99 for (var i = 0; i < 4; i++) { 100 temp += $(page.tempLi).find("a").text(i + 2) 101 .parent().prop("outerHTML"); 102 } 103 $(".pagination li").eq(1).after(temp.toString()); 104 // 【點擊 中間頁碼靠前頁碼的情況】如果當前頁<中間位置的頁碼 && 上一頁按鈕之后的頁碼按鈕>=2 105 // 【即點擊的中間頁碼按鈕靠前的頁碼按鈕】 106 } else if (page.pageNo < $(".pagination li").eq(3).text() 107 && $(".pagination li").eq(1).text() >= 2) { 108 absCon = page.pageNo - 1 > absCon ? absCon 109 : page.pageNo - 1; 110 for (var i = 0; i < absCon; i++) { 111 $(".pagination li").first().after( 112 $(page.tempLi).find("a").text( 113 eval($(".pagination li").eq(1) 114 .text()) - 1).parent() 115 .prop("outerHTML")); 116 $(".pagination li").eq( 117 $(".pagination li").length - 2).remove(); // 靠后的頁碼按鈕 118 // 【此處-2是將上一頁 119 // 下一頁兩個按鈕去掉】 120 } 121 } 122 123 } 124 } 125 126 //刪除或者新增信息的時候，頁碼可能動態變化 127 if($(".pagination li:not(:last):last").text() > page.totalPage) { 128 $(".pagination li:not(:last):last").remove(); 129 if(page.pageNo == page.totalPage) { 130 $("a[aria-label='Next']").hide(); 131 } 132 if($(".pagination li:not(:first):first").text() > 1) { 133 $(".pagination li:first").after($(page.tempLi).find("a").text(parseInt($(".pagination li:not(:first):first").text()) - 1).parent().prop("outerHTML")); 134 } 135 } 136 137 //上一頁 下一頁 的隱藏與顯示 138 if($(".pagination li:not(:last):last").text() > page.pageNo) { 139 $("a[aria-label='Next']").show(); 140 } else { 141 $("a[aria-label='Next']").hide(); 142 } 143 144 if($(".pagination li:not(:first):first").text() < page.pageNo) { 145 $("a[aria-label='Previous']").show(); 146 } else { 147 $("a[aria-label='Previous']").hide(); 148 } 149 150 $(".pagination li:contains(" + page.pageNo + ")") 151 .addClass("active"); // 為 新的 當前頁 頁碼按鈕 添加 active選中狀態 152 } 153 } 154 155 // 初始化方法 頁碼的點擊事件 上下頁點擊事件 每頁顯示多少條的 改變事件 156 page.prototype.init = function() { 157 $("a[aria-label='Previous']").click(function() { 158 $("a[aria-label='Next']").show(); 159 if (page.pageNo == 2) { 160 $("a[aria-label='Previous']").hide(); 161 } else { 162 $("a[aria-label='Previous']").show(); 163 } 164 if (page.pageNo == 1) { 165 return; 166 } 167 page.pageNo--; 168 page.pageSet(bindData, page); 169 }); 170 171 // 綁定 下一頁 的點擊事件 172 $("a[aria-label='Next']").click(function() { 173 $("a[aria-label='Previous']").show(); 174 if (page.pageNo == page.totalPage - 1) { 175 $("a[aria-label='Next']").hide(); 176 } else { 177 $("a[aria-label='Next']").show(); 178 } 179 page.pageNo++; 180 page.pageSet(bindData, page); 181 }); 182 183 // 上面的.click()綁定點擊事件 和 下面的 $(document).on("click",".pagination 184 // li:gt(0):not(:last)",function(){});的區別在於： 185 // .click只能為頁面現有的元素綁定點擊事件，如果是動態生成的新的元素，是沒有事件的 186 // 而$(document).on("click","指定的元素",function(){});方法則是將指定的事件綁定在document上，而新產生的元素如果符合指定的元素，那就觸發此事件 187 188 // 為動態生成的 頁碼按鈕 添加 點擊事件 189 $(document).on("click", ".pagination li:gt(0):not(:last)", function() { 190 page.pageNo = $(this).text(); 191 $("a[aria-label='Previous']").show(); 192 $("a[aria-label='Next']").show(); 193 if (page.pageNo == "1") { 194 $("a[aria-label='Previous']").hide(); 195 } 196 if (page.pageNo == page.totalPage) { 197 $("a[aria-label='Next']").hide(); 198 } 199 200 page.pageSet(bindData, page); 201 }); 202 203 // 為select 選擇每頁顯示多少條 添加改變時間 【但是這不使用change而是使用input 是因為change對IE瀏覽器不支持】 204 $(".pageInfo").on( 205 "input", 206 function() { 207 page.pageSize = $(this).val(); 208 page.pageNo = 1; 209 $("a[aria-label='Previous']").hide(); 210 $(".pagination li:not(:first):not(:last)").remove(); 211 // $(".pagination li:not(:first), .pagination 212 // li:not(:last)").remove(); 213 $(".pagination li:first").after( 214 "<li class='active'><a href='#'>1</a></li>"); 215 page.pageSet(bindData, page); 216 }); 217 218 } 219 220 /** 221 * 清除頁碼部分，回到初始化狀態 222 */ 223 page.prototype.cleanUp = function() { 224 $("a[aria-label='Previous']").hide(); 225 $("a[aria-label='Next']").show(); 226 $(".pagination li:gt(0):not(:last)").remove(); 227 $(".pagination li:eq(0)").after("<li><a href='#'>1</a></li>"); 228 } 229 230 })();
3》》》本頁面的js中 需要提供數據的封裝功能 bindDate()方法,【並且注意，任何頁面發生變化的地方都需要調用分頁的page.pageSet();方法，例如數據的增加，數據的刪除，還有page對象初始化，頁面初始化的時候就是這幾個地方需要調用】
3.1》》》product.js中的page對象初始化也就是在頁面初始化的時候+刪除操作的時候
1 var indexProductAdd;//定義一個index作為產品添加彈出窗的layer打開返回值 ，用於關閉的時候使用 2 var indexProductUpdate; //定義一個index作為添加產品的彈出框的返回值 3 var product; 4 var page; 5 var bindData; 6 7 $(document).ready( function () { 8 9 /** 10 * 查詢類型 【eq:產品:product 疾病:disease 基因：gene 】 11 */ 12 var queryType; 13 14 /** 15 * 添加產品 頁面 16 */ 17 18 $(".btn-primary").click( function(){ 19 indexProductAdd = layer.open({ 20 type: 2, 21 title: "添加產品", 22 content: 'productadd.htmls', 23 area: ['500px', '580px'] 24 }); 25 }); 26 27 /** 28 * updateproduct.htmls 更新 產品信息 29 */ 30 $(document).on("click",".table-bordered tbody tr a[class='up']",function(){ 31 product = $.parseJSON( $(this).parents('tr').find("input").eq(1).val()); 32 $(this).parents('tr').find("input[type='checkbox']").prop("checked",true);//在點擊更新按鈕之后，勾選本行對應的checkbox 33 indexProductUpdate = layer.open({ 34 type: 2, 35 title: "修改產品", 36 content: 'updateproduct.htmls', 37 area: ['500px', '580px'], 38 end : function(){ 39 $(".table-bordered tbody :checked").attr("checked",false); 40 } 41 }); 42 }); 43 44 45 46 47 48 /** 49 * 封裝數據 的方法 在本頁面的js中， 50 */ 51 bindData = function bindData(){ 52 var result = page.result; 53 $(".table-bordered tbody").empty(); 54 if(result != "" && result != null && result != undefined) { 55 var temp = ""; 56 $.each(result, function(index, item) { 57 //JSON.stringify(item) 對象轉化字符串 58 temp += "<tr class='text-c'><td><input type='checkbox' value='"+item.productId+"'><input type='hidden' value='"+JSON.stringify(item)+"'/></td><td>"+item.productName+"</td><td><a href='disease.htmls?productId="+item.productId+"' class='check'>【查看疾病信息】</a><a href='JavaScript:void(0)' class='up'>【更新】</a></td></tr>"; 59 }); 60 $(".table-bordered tbody").append(temp); 61 } 62 page.setValue(); 63 } 64 65 /** 66 * 實例化一個分頁組件的 對象 67 */ 68 page = new page("queryAllProduct2.htmls", bindData); 69 page.pageSet(); 70 71 72 73 /** 74 * 批量刪除 75 */ 76 $(".btn-danger").click(function(){ 77 var productId = []; 78 $(".table-bordered tbody :checked").each(function(index,item){ //注意:checked前面需要空格 79 productId.push(item.value); //數組中添加數據 需要push() 80 }); 81 82 if(productId.length == 0){ 83 layer.msg('請選擇至少一條記錄！', { 84 icon: 3, 85 time: 2000 //2秒關閉（如果不配置，默認是3秒） 86 }, function(){ 87 //do something 88 }); 89 return; 90 }else{ 91 $.post("productDelete.htmls?productId="+productId, function(data){ 92 if(data){ 93 layer.msg('刪除成功！', { 94 icon: 1, 95 time: 2000 //2秒關閉（如果不配置，默認是3秒） 96 }, function(){ 97 //do something 98 }); 99 100 // page.cleanUp(); 101 if($(".table-bordered tbody :checked").length == $(".table-bordered tbody tr").length && page.pageNo>1){//若本頁全部刪除 102 page.pageNo--; 103 } 104 page.pageSet(); 105 }else{ 106 layer.msg('刪除失敗！', { 107 icon: 2, 108 time: 2000 //2秒關閉（如果不配置，默認是3秒） 109 }, function(){ 110 //do something 111 }); 112 } 113 $(".table-hover thead :checked").attr("checked",false); 114 return; 115 }); 116 } 117 }); 118 119 120 121 122 123 124 } );
3.2》》》productAdd.js中添加一條數據完成后
1 $(document).ready( function () { 2 3 //為添加產品的表單加驗證效果 4 $('#form-product-add').bootstrapValidator(); 5 //$('#form-product-add').data('bootstrapValidator').validate(); //提交按鈕是sumbit 6 //$('#form-product-add').data('bootstrapValidator').isValid(); //提交按鈕是button 7 /** 8 * 添加產品的按鈕 9 */ 10 $("#pAdd").click(function(){ 11 $('#form-product-add').bootstrapValidator('validate');//為表單的添加按鈕 添加一個綁定表單的方法 12 var productName = $("input[name='productName']").val(); 13 var productCre = $("textarea[name='productCre']").val(); 14 var temp; 15 if(productName !="" ){ 16 $.ajax({url:"productAdd.htmls", 17 type:"post", 18 data:{ 19 "productName" : productName, 20 "productCre" : productCre 21 }, 22 success:function(data){ 23 24 if(data != null){ 25 parent.page.pageSet(); 26 } 27 // var index = parent.layer.getFrameIndex(window.name); 可以用這個獲取當前要關閉的layer ,也可以使用parent.indexProductAdd 獲取在父層定義的那個layer。open()的彈窗 28 parent.layer.close(parent.indexProductAdd); //獲取到layer的彈出窗 關閉它 29 }}); 30 31 } 32 return false;//頁面的表達提交使用submit，然后又對這個提交按鈕綁定一個點擊事件，使用ajax來和后台進行交互，這個時候如果不return false；會導致ajax提交一次，submit提交一次，這樣的錯誤不容易找出來，會表現出來：ajax執行成功但是時而會進回調函數，時而不會進入回調函數， 33 }); 34 35 /** 36 * 全選按鈕的 全選功能 37 */ 38 $('table th input:checkbox').on('click' , function(){ 39 var that = this; 40 $(this).closest('table').find('tr > td:first-child input:checkbox') 41 .each(function(){ 42 this.checked = that.checked; 43 $(this).closest('tr').toggleClass('selected'); 44 }); 45 }); 46 } );
4》》》controller服務器中的處理方法
@Controller
@RequestMapping("geneInfo")
public class GeneInfoController {
1 /** 2 * 分頁查詢---查詢所有產品 3 * @param model 4 * @return 5 */ 6 @RequestMapping("/queryAllProduct2") 7 @ResponseBody 8 public PageInfo<Product> queryAllProduct2(ModelMap model, int pageNo, int pageSize){ 9 Criteria criteria = getCurrentSession().createCriteria(Product.class); 10 return productService.findQuery(criteria ,pageNo , pageSize ); 11 } 12
5》》》Dao的實現層 的分頁實現
1 @Override 2 public PageInfo<T> findQuery(Criteria criteria, int pageNo, int pageSize) { 3 try { 4 Assert.isTrue(pageNo >= 1, "pageNO should start from 1"); 5 //拆分order by子句 6 Field field = CriteriaImpl.class.getDeclaredField("orderEntries"); 7 field.setAccessible(true); 8 List<?> orderEntrys = (List<?>) field.get(criteria); 9 field.set(criteria, new ArrayList()); 10 //統計總數 11 long totalCount = countAll(criteria); 12 criteria.setProjection(null); 13 //統計完了再把order by子句加上 這樣保證了sql語句不會出錯 14 field.set(criteria, orderEntrys); 15 List<T> list = findPage(criteria, pageNo, pageSize); 16 if (totalCount < 1) { 17 return new PageInfo<T>(); 18 } 19 PageInfo<T> page = new PageInfo<T>(); 20 page.setPageNum(pageNo); 21 page.setTotal(totalCount); 22 page.setPages((int) (totalCount / pageSize == 0 ? totalCount / pageSize : totalCount / pageSize + 1)); 23 page.setPageSize(pageSize); 24 page.setList(list); 25 return page; 26 } catch (Exception e) { 27 // TODO: handle exception 28 throw new QueryException("查詢出錯！"); 29 } 30 31 }
其中主要的思想 就是 將分頁組件 分離出來，僅作分頁處理。而數據的封裝則是在不同的頁面進行不同的封裝實現。然后封裝數據的方法作為參數傳遞給分頁對象。