分页实现，类似博客园首页的分页

几个月前做一个项目，就自己一个人。

每个项目都会用到分页，就和老大确认了一下要怎么样的分页，是“首页、上一页、下一页、末页、去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 }

最终分页是实现了，但是总感觉想在其他项目中用起来也不是特别方便，只能说是记录一下自己的学习经历吧。

不知道怎么上传附件，想把样式压缩包上传的，里面好多分页样式。