分頁實作，類似部落格園首頁的分頁

幾個月前做一個項目，就自己一個人。

每個項目都會用到分頁，就和老大确認了一下要怎麼樣的分頁，是“首頁、上一頁、下一頁、末頁、去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 }

最終分頁是實作了，但是總感覺想在其他項目中用起來也不是特别友善，隻能說是記錄一下自己的學習經曆吧。

不知道怎麼上傳附件，想把樣式壓縮包上傳的，裡面好多分頁樣式。

如果本文對您有幫助，點一下右下角的“推薦”

分頁實作，類似部落格園首頁的分頁

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條