幾個月前做一個項目，就自己一個人。
每個項目都會用到分頁，就和老大確認了一下要怎么樣的分頁，是“首頁、上一頁、下一頁、末頁、去X頁”這種“老式”的還是和博客園首頁的分頁一樣的，然后他選擇了后者。
項目也就兩周時間，所以必須用最快最方便的方式去實現，所以考慮了要不要網上直接拉一個（這種分頁的網上肯定有很多）。
后來想想應該也不是很困難，無非是樣式什么的自己也不好，就自己搞吧，到時候套個樣式。
下面看一下實現效果：
下面說說實現的技術：
項目用的Spring+Velocity。
在使用到分頁的分頁的地方只需要加入：
1 #pager($page,"queryForm")
上面使用到了自定義的velocity宏，代碼如下
################################################################################
## 通用分頁宏
## 傳入的分頁數據參數必須使用"page"作為參數名, 並且僅支持這一個參數
##
## author:
## date: 2013-03-18
## param: page 分頁數據參數, 必須
## param: form 頁面查詢條件的表單id, 可選
################################################################################
#macro ( pager $page $form )
#parse("/screen/contain/pager.vm")
#end
調用的時候只傳入了$page參數和form的id。
這個宏所做的事情僅僅就是引入了pager.vm文件，下面是pager.vm文件的內容
1 ################################################################################ 2 ## 通用分頁vm 3 ## 傳入的分頁數據參數必須使用"page"作為參數名, 並且僅支持這一個參數 4 ## 5 ## author: 6 ## date: 2013-03-18 7 ## param: page 分頁數據參數, 必須 8 ## param: form 頁面查詢條件的表單id, 可選 9 ################################################################################ 10 #set($floatNum=3) 11 <script src="${rc.contextPath}/scripts/jquery.page.js" type="text/javascript"></script> 12 <div class="manu"> 13 #if($!{page} && $!{page.totalCount} > 0) 14 <script type="text/javascript"> 15 _data = jQuery.trim("$!{data}"); 16 _form = jQuery.trim("$!{form}"); 17 </script> 18 <div id="_page"> 19 <input type="hidden" id="_total_page" value="$!{page.totalPage}" /> 20 #if(!$!{page.firstPage}) 21 <a id="_pre_page" href="#" style="font-weight:bold">Prev</a> 22 <input type="hidden" value="$!{page.prePage}" /> 23 #else 24 <a id="_none_pre_page" href="#" style="font-weight:bold">Prev</a> 25 #end 26 27 ##輸出從第一頁到當前頁的頁碼（包括當前頁頁碼） 28 #if($calUtil.lessOrEqual($calUtil.subtract(${page.pageNo},1),$calUtil.multiply(2,$floatNum))) 29 #foreach($p in [1..$page.pageNo]) 30 #if($!{page.pageNo} != ${p})<a id="_page_no" href="#">$!{p}</a>#else<span class="current">$!{p}</span>#end 31 #end 32 #else 33 #foreach($p in [1..$floatNum]) 34 #if($!{page.pageNo} != ${p})<a id="_page_no" href="#">$!{p}</a>#else<span class="current">$!{p}</span>#end 35 #end 36 ... 37 #foreach($p in [$calUtil.subtract(${page.pageNo},$floatNum)..$page.pageNo]) 38 #if($!{page.pageNo} != ${p})<a id="_page_no" href="#">$!{p}</a>#else<span class="current">$!{p}</span>#end 39 #end 40 #end 41 ##當前頁不是最后一頁，需要輸出當前頁后面的頁碼 42 #if($calUtil.lessThan(${page.pageNo},${page.totalPage})) 43 ##輸出從當前頁到最后一頁的頁碼（不包含當前頁） 44 #if($calUtil.lessOrEqual($calUtil.subtract(${page.totalPage},${page.pageNo}),$calUtil.multiply(2,$floatNum))) 45 #foreach($p in [$calUtil.add($page.pageNo,1)..$page.totalPage]) 46 #if($!{page.pageNo} != ${p})<a id="_page_no" href="#">$!{p}</a>#else<span class="current">$!{p}</span>#end 47 #end 48 #else 49 #foreach($p in [$calUtil.add($page.pageNo,1)..$calUtil.add($!{page.pageNo},$floatNum)]) 50 #if($!{page.pageNo} != ${p})<a id="_page_no" href="#">$!{p}</a>#else<span class="current">$!{p}</span>#end 51 #end 52 ... 53 #foreach($p in [$calUtil.subtract($page.totalPage,$calUtil.subtract($floatNum,1))..$page.totalPage]) 54 #if($!{page.pageNo} != ${p})<a id="_page_no" href="#">$!{p}</a>#else<span class="current">$!{p}</span>#end 55 #end 56 #end 57 #end 58 59 60 #if(!$!{page.lastPage}) 61 <a id="_next_page" href="#" style="font-weight:bold">Next</a> 62 <input type="hidden" value="$!{page.nextPage}" /> 63 #else 64 <a id="_none_next_page" href="#" style="font-weight:bold">Next</a> 65 #end 66 <input id="_go_page" class="input-page" type="text" size="2" title="輸入頁碼按回車" maxlength="4" /><a id="_go" href="#">GO</a> 67 </div> 68 #else 69 沒有結果 70 #end 71 72 #if ($!{page}) 73 <input type="hidden" id="_page_orderStr" name="orderStr" value="$!{page.orderStr}"/> 74 #end 75 </div>
上面的代碼應該能看的明白，都是根據當前是第幾頁，一共有多少頁去打印不同的內容。
想法很簡單，
1.設置浮動頁數量X
2.如果第一頁到當前頁的距離小於2*X，打印1至當前頁頁碼；大於2X則打印1至X拼上省略號再打印（當前頁-X）至當前頁頁面
3.當前頁之后的操作和2類似
上面上面是打印出得分頁插件，點擊的操作都在JS中。
分頁頁面上還用到了一些計算，為了方便，單獨寫了個類
1 public class VelocityCalUtil { 2 /** 3 * 比較兩個int值，a>b true 4 * 5 * @return boolean 6 */ 7 public static boolean greaterThan(int a, int b) { 8 if (a > b) { 9 return true; 10 } 11 return false; 12 } 13 14 public static boolean greaterOrEqual(int a, int b) { 15 if (a >= b) { 16 return true; 17 } 18 return false; 19 } 20 21 public static boolean lessOrEqual(int a, int b) { 22 if (a <= b) { 23 return true; 24 } 25 return false; 26 } 27 public static boolean lessThan(int a, int b) { 28 if (a < b) { 29 return true; 30 } 31 return false; 32 } 33 34 /** 35 * 相減運算 36 * 37 * @return int 38 */ 39 public static int subtract(int minuend, int subtractor) { 40 return minuend - subtractor; 41 } 42 43 /** 44 * 45 * @return int 46 */ 47 public static int multiply(int a, int b) { 48 return a * b; 49 } 50 51 public static int add(int a, int b) { 52 return a + b; 53 } 54 }
給出分頁的樣式吧
1 /*CSS manu style pagination*/ 2 .manu { 3 PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center 4 } 5 .manu A { 6 BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #036cb4; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid; TEXT-DECORATION: none 7 } 8 .manu A:hover { 9 BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid 10 } 11 .manu A:active { 12 BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid 13 } 14 .manu .current { 15 BORDER-RIGHT: #036cb4 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #036cb4 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #036cb4 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #036cb4 1px solid; BACKGROUND-COLOR: #036cb4 16 } 17 18 /*分頁頁碼輸入框*/ 19 .input-page { 20 width: 30px; 21 height: 12px; 22 margin-bottom:4px; 23 }
最終分頁是實現了，但是總感覺想在其他項目中用起來也不是特別方便，只能說是記錄一下自己的學習經歷吧。
不知道怎么上傳附件，想把樣式壓縮包上傳的，里面好多分頁樣式。