几个月前做一个项目,就自己一个人。
每个项目都会用到分页,就和老大确认了一下要怎么样的分页,是“首页、上一页、下一页、末页、去X页”这种“老式”的还是和博客园首页的分页一样的,然后他选择了后者。
项目也就两周时间,所以必须用最快最方便的方式去实现,所以考虑了要不要网上直接拉一个(这种分页的网上肯定有很多)。
后来想想应该也不是很困难,无非是样式什么的自己也不好,就自己搞吧,到时候套个样式。
下面看一下实现效果:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5GcuMjYlVGM5YTNjVjZjRjYhljZhFTYkFmMhFGZ4EWZ2MWNfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.png)
下面说说实现的技术:
项目用的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 }
最终分页是实现了,但是总感觉想在其他项目中用起来也不是特别方便,只能说是记录一下自己的学习经历吧。
不知道怎么上传附件,想把样式压缩包上传的,里面好多分页样式。
如果本文对您有帮助,点一下右下角的“推荐”