使用freemarker实现了一个数据分页控件。如果当前页超过 指定显示的页数链接数 的一半,则当前页居中显示。例如:当前第10页,显示10个页数链接数,那么显示第6~第15页分页链接,且第10页居中。代码如下:
- <#--
- 分页标签:用于显示数据分页链接。
- pagination:分页对象。
- url:链接地址
- showPageLinkCount:显示的页数链接数
- isShowMoreLI:是否显示“<li>...</li>”提示更多还有更多页数
- isNeedPageTo:是否显示转到指定页数的表单
- -->
- <#macro pager pagination url="#" showPageLinkCount=10 isShowMoreLI=true isNeedPageTo=true>
- <#if (pagination.totalCount)??>
- <#if (pagination.totalCount>1)>
- <#assign firstPageUrl=url+"?pageNo=1">
- <#assign prePageUrl=url+"?pageNo="+(pagination.pageNo-1)>
- <#assign nextPageUrl=url+"?pageNo="+(pagination.pageNo+1)>
- <#assign lastPageUrl=url+"?pageNo="+pagination.totalCount>
- <ul class="pager">
- <li class="firstPage">
- <#if (pagination.pageNo>1)>
- <a href="${firstPageUrl}">首页</a>
- <#else>
- <span>首页</span>
- </#if>
- </li>
- <li class="prePage">
- <#if (pagination.pageNo>1)>
- <a href="${prePageUrl}">上一页</a>
- <#else>
- <span>上一页</span>
- </#if>
- </li>
- <@outPutPageNo paginationpagination=pagination urlurl=url showPageLinkCountshowPageLinkCount=showPageLinkCount isShowMoreLIisShowMoreLI=isShowMoreLI/>
- <li class="nextPage">
- <#if (pagination.pageNo<pagination.totalCount)>
- <a href="${nextPageUrl}">下一页</a>
- <#else>
- <span>下一页</span>
- </#if>
- </li>
- <li class="lastPage">
- <#if (pagination.pageNo<pagination.totalCount)>
- <a href="${lastPageUrl}">尾页</a>
- <#else>
- <span>尾页</span>
- </#if>
- </li>
- <li class="pageInfo">
- 共 ${pagination.totalCount} 页
- </li>
- <#if isNeedPageTo>
- <li class="pageTo">
- <form id="pagerForm" action="#" method="get" onsubmit="return $.formValidator.pageIsValid('pagerForm');">
- 转到第 <input type="text" id="pageToNum" name="page" class="pageToNum"> 页
- <input type="submit" id="submitButton4Page" class="formButton" value="确定" hidefocus="">
- </form>
- <script type="text/javascript">
- jQuery(document).ready(function(){
- validatorInitConfig(null,"pagerForm");
- jQuery("#pageToNum").formValidator({
- validatorgroup:"pagerForm"
- }).inputValidator({
- min : 1,
- max : 4,
- onerror : "请输入要转到的页数!"
- }).regexValidator({
- regexp : "^[1-9]\\d*$",
- onerror : "页数只能是正整数!"
- });
- });
- </script>
- </li>
- </#if>
- </ul>
- </#if>
- </#if>
- </#macro>
- <#--
- 输出分页链接。如果当前页超过 显示的页数链接数 的一半,则当前页居中显示。例如:当前第10页,总共20页,那么显示第6~第15页分页链接,且第10页居中。
- pagination:分页对象。
- url:链接地址
- showPageLinkCount:显示的页数链接数
- isShowMoreLI:是否显示“<li>...</li>”提示更多还有更多页数0
- -->
- <#macro outPutPageNo pagination url showPageLinkCount isShowMoreLI>
- <#--
- └────────────────────────────────────────────────┘
- A B
- └───────┴────────┘
- A1 PageNo B1
- A->B:totalCount
- A1:startIndex
- B1:endIndex
- A1->B1:showPageLinkCount
- A1->PageNo:spaceOFStartIndexToPageNo
- A1->B1 -1:spaceOFStartIndexToPageLinkCount
- -->
- <#if (showPageLinkCount%2==1)>
- <#assign spaceOFStartIndexToPageNo=((showPageLinkCount+1)/2)-1>
- <#else>
- <#assign spaceOFStartIndexToPageNo=(showPageLinkCount/2)-1>
- </#if>
- <#assign spaceOFStartIndexToPageLinkCount=(showPageLinkCount-1)>
- <#if ((pagination.pageNo-spaceOFStartIndexToPageNo) <= 1) || (pagination.totalCount<=showPageLinkCount)>
- <#assign startIndex=1>
- <#assign isNeedStartMore=false>
- <#else>
- <#assign startIndex=(pagination.pageNo-spaceOFStartIndexToPageNo)>
- <#assign isNeedStartMore=true>
- </#if>
- <#if ((startIndex+spaceOFStartIndexToPageLinkCount) < pagination.totalCount)>
- <#assign endIndex=startIndex+spaceOFStartIndexToPageLinkCount>
- <#assign isNeedEndMore=true>
- <#else>
- <#assign endIndex=(pagination.totalCount)>
- <#assign isNeedEndMore=false>
- </#if>
- <#if isNeedStartMore&&isShowMoreLI><li>...</li></#if>
- <#list startIndex..endIndex as i>
- <#if pagination.pageNo != i>
- <li>
- <a href="${url+"?pageNo="+i}">${i}</a>
- </li>
- <#else>
- <li class="currentPage">
- <span>${i}</span>
- </li>
- </#if>
- </#list>
- <#if isNeedEndMore&&isShowMoreLI><li>...</li></#if>
- </#macro>
使用实例如下:
- <#-- 分页标签 BEGIN -->
- <#assign pagination = {"pageNo":10,"pageSize":10,"totalCount":20}>
- <@pager paginationpagination=pagination url="list.htm"/>
- <#-- 分页标签 END -->
css代码如下:
- /*分页控件*/
- .pager{float: right; clear: both; margin-top: 5px;}
- .pager li{line-height: 18px; display: block; float: left; padding: 0px 5px; margin: 0px 3px; font-size: 12px; border: 1px solid #cccccc;}
- .pager li:hover{color: #ff9900; border: 1px solid #ff9900;}
- .pager li:hover a{color: #ff9900;}
- .pager li a{color: #464646;}
- .pager li span{color: #cfcfcf;}
- .pager li.currentPage{border: 1px solid #ff9900; background-color: #ff9900;}
- .pager li.currentPage span{font-weight: bold; color: #ffffff;}
- .pager li.pageInfo{color: #464646; border: none; background: none;}
- .pager li.pageTo{height:20px; color: #464646; border: none; background: none;}
- .pager li.pageTo input{line-height: 20px;}
- .pager li.pageTo input.pageToNum{width: 20px; height: 18px; margin-top: 0px; border: 1px solid #cccccc; display:table-cell; vertical-align:top;}
- .pager li.pageTo input.formButton {width: 40px; background: #F3F3F3; height: 20px;}
- .pager li.pageTo input.formButton:hover {background: #ff9900; color: #ffffff;}
/*分页控件*/
.pager{float: right; clear: both; margin-top: 5px;}
.pager li{line-height: 18px; display: block; float: left; padding: 0px 5px; margin: 0px 3px; font-size: 12px; border: 1px solid #cccccc;}
.pager li:hover{color: #ff9900; border: 1px solid #ff9900;}
.pager li:hover a{color: #ff9900;}
.pager li a{color: #464646;}
.pager li span{color: #cfcfcf;}
.pager li.currentPage{border: 1px solid #ff9900; background-color: #ff9900;}
.pager li.currentPage span{font-weight: bold; color: #ffffff;}
.pager li.pageInfo{color: #464646; border: none; background: none;}
.pager li.pageTo{height:20px; color: #464646; border: none; background: none;}
.pager li.pageTo input{line-height: 20px;}
.pager li.pageTo input.pageToNum{width: 20px; height: 18px; margin-top: 0px; border: 1px solid #cccccc; display:table-cell; vertical-align:top;}
.pager li.pageTo input.formButton {width: 40px; background: #F3F3F3; height: 20px;}
.pager li.pageTo input.formButton:hover {background: #ff9900; color: #ffffff;}
此外验证框架使用了formValidator.js,需要jquery支持。