几个月前做一个项目，就自己一个人。
每个项目都会用到分页，就和老大确认了一下要怎么样的分页，是“首页、上一页、下一页、末页、去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 }
最终分页是实现了，但是总感觉想在其他项目中用起来也不是特别方便，只能说是记录一下自己的学习经历吧。
不知道怎么上传附件，想把样式压缩包上传的，里面好多分页样式。
如果本文对您有帮助，点一下右下角的“推荐”