程序博客网 > 卖图片知乎

数据分页标签控件Freemarker宏代码

来源：互联网 发布：卖图片知乎 编辑：程序博客网 时间：2024/05/17 03:47


使用freemarker实现了一个数据分页控件。如果当前页超过 指定显示的页数链接数 的一半，则当前页居中显示。例如：当前第10页，显示10个页数链接数，那么显示第6~第15页分页链接，且第10页居中。代码如下：

 

Xml代码 复制代码 收藏代码
  1. <#--  
  2.     分页标签：用于显示数据分页链接。  
  3.     pagination：分页对象。  
  4.     url：链接地址  
  5.     showPageLinkCount:显示的页数链接数  
  6.     isShowMoreLI:是否显示“<li>...</li>”提示更多还有更多页数  
  7.     isNeedPageTo：是否显示转到指定页数的表单  
  8. -->  
  9. <#macro pager pagination url="#" showPageLinkCount=10 isShowMoreLI=true isNeedPageTo=true>  
  10.     <#if (pagination.totalCount)??>  
  11.         <#if (pagination.totalCount>1)>  
  12.             <#assign firstPageUrl=url+"?pageNo=1">  
  13.             <#assign prePageUrl=url+"?pageNo="+(pagination.pageNo-1)>  
  14.             <#assign nextPageUrl=url+"?pageNo="+(pagination.pageNo+1)>  
  15.             <#assign lastPageUrl=url+"?pageNo="+pagination.totalCount>  
  16.               
  17.             <ul class="pager">  
  18.                 <li class="firstPage">  
  19.                     <#if (pagination.pageNo>1)>  
  20.                         <a href="${firstPageUrl}">首页</a>  
  21.                     <#else>  
  22.                         <span>首页</span>  
  23.                     </#if>  
  24.                 </li>  
  25.               
  26.                 <li class="prePage">  
  27.                     <#if (pagination.pageNo>1)>  
  28.                         <a href="${prePageUrl}">上一页</a>  
  29.                     <#else>  
  30.                         <span>上一页</span>  
  31.                     </#if>  
  32.                 </li>  
  33.                   
  34.                 <@outPutPageNo paginationpagination=pagination urlurl=url showPageLinkCountshowPageLinkCount=showPageLinkCount isShowMoreLIisShowMoreLI=isShowMoreLI/>  
  35.               
  36.                 <li class="nextPage">  
  37.                     <#if (pagination.pageNo<pagination.totalCount)>  
  38.                         <a href="${nextPageUrl}">下一页</a>  
  39.                     <#else>  
  40.                         <span>下一页</span>  
  41.                     </#if>  
  42.                 </li>  
  43.               
  44.                 <li class="lastPage">  
  45.                     <#if (pagination.pageNo<pagination.totalCount)>  
  46.                         <a href="${lastPageUrl}">尾页</a>  
  47.                     <#else>  
  48.                         <span>尾页</span>  
  49.                     </#if>  
  50.                 </li>  
  51.                   
  52.                 <li class="pageInfo">  
  53.                     共 ${pagination.totalCount} 页  
  54.                 </li>  
  55.                   
  56.                 <#if isNeedPageTo>  
  57.                     <li class="pageTo">  
  58.                         <form id="pagerForm" action="#" method="get" onsubmit="return $.formValidator.pageIsValid('pagerForm');">  
  59.                             转到第&nbsp;<input type="text" id="pageToNum" name="page" class="pageToNum">&nbsp;页  
  60.                             <input type="submit" id="submitButton4Page" class="formButton" value="确定" hidefocus="">  
  61.                         </form>  
  62.                         <script type="text/javascript">  
  63.                             jQuery(document).ready(function(){  
  64.                                 validatorInitConfig(null,"pagerForm");  
  65.                                 jQuery("#pageToNum").formValidator({  
  66.                                     validatorgroup:"pagerForm"  
  67.                                 }).inputValidator({  
  68.                                     min : 1,  
  69.                                     max : 4,  
  70.                                     onerror : "请输入要转到的页数！"  
  71.                                 }).regexValidator({  
  72.                                     regexp : "^[1-9]\\d*$",  
  73.                                     onerror : "页数只能是正整数！"  
  74.                                 });  
  75.                             });  
  76.                         </script>  
  77.                     </li>  
  78.                 </#if>  
  79.             </ul>  
  80.         </#if>  
  81.     </#if>  
  82. </#macro>  
  83.   
  84. <#--  
  85.     输出分页链接。如果当前页超过 显示的页数链接数 的一半，则当前页居中显示。例如：当前第10页，总共20页，那么显示第6~第15页分页链接，且第10页居中。  
  86.     pagination：分页对象。  
  87.     url：链接地址  
  88.     showPageLinkCount:显示的页数链接数  
  89.     isShowMoreLI:是否显示“<li>...</li>”提示更多还有更多页数0  
  90. -->  
  91. <#macro outPutPageNo pagination url showPageLinkCount isShowMoreLI>  
  92.     <#--  
  93.         └────────────────────────────────────────────────┘  
  94.         A                                                             B  
  95.           
  96.         └───────┴────────┘  
  97.         A1      PageNo  B1  
  98.           
  99.         A->B:totalCount  
  100.         A1:startIndex  
  101.         B1:endIndex  
  102.         A1->B1:showPageLinkCount  
  103.         A1->PageNo:spaceOFStartIndexToPageNo  
  104.         A1->B1 -1:spaceOFStartIndexToPageLinkCount  
  105.     -->  
  106.   
  107.     <#if (showPageLinkCount%2==1)>  
  108.         <#assign spaceOFStartIndexToPageNo=((showPageLinkCount+1)/2)-1>  
  109.     <#else>  
  110.         <#assign spaceOFStartIndexToPageNo=(showPageLinkCount/2)-1>  
  111.     </#if>  
  112.       
  113.     <#assign spaceOFStartIndexToPageLinkCount=(showPageLinkCount-1)>  
  114.       
  115.     <#if ((pagination.pageNo-spaceOFStartIndexToPageNo) <= 1) || (pagination.totalCount<=showPageLinkCount)>  
  116.         <#assign startIndex=1>  
  117.         <#assign isNeedStartMore=false>  
  118.     <#else>  
  119.         <#assign startIndex=(pagination.pageNo-spaceOFStartIndexToPageNo)>  
  120.         <#assign isNeedStartMore=true>  
  121.     </#if>  
  122.       
  123.     <#if ((startIndex+spaceOFStartIndexToPageLinkCount) < pagination.totalCount)>  
  124.         <#assign endIndex=startIndex+spaceOFStartIndexToPageLinkCount>  
  125.         <#assign isNeedEndMore=true>  
  126.     <#else>  
  127.         <#assign endIndex=(pagination.totalCount)>  
  128.         <#assign isNeedEndMore=false>  
  129.     </#if>  
  130.   
  131.     <#if isNeedStartMore&&isShowMoreLI><li>...</li></#if>  
  132.     <#list startIndex..endIndex as i>  
  133.         <#if pagination.pageNo != i>  
  134.             <li>  
  135.                 <a href="${url+"?pageNo="+i}">${i}</a>  
  136.             </li>  
  137.         <#else>  
  138.             <li class="currentPage">  
  139.                 <span>${i}</span>  
  140.             </li>  
  141.         </#if>  
  142.     </#list>  
  143.     <#if isNeedEndMore&&isShowMoreLI><li>...</li></#if>  
  144. </#macro>  

 

使用实例如下：

 

Xml代码 复制代码 收藏代码
  1. <#-- 分页标签 BEGIN -->  
  2. <#assign pagination = {"pageNo":10,"pageSize":10,"totalCount":20}>  
  3. <@pager paginationpagination=pagination url="list.htm"/>  
  4. <#-- 分页标签 END -->  

 css代码如下：

 

Html代码 复制代码 收藏代码
  1. /*分页控件*/  
  2. .pager{float: right; clear: both; margin-top: 5px;}  
  3. .pager li{line-height: 18px; display: block; float: left; padding: 0px 5px; margin: 0px 3px; font-size: 12px; border: 1px solid #cccccc;}  
  4. .pager li:hover{color: #ff9900; border: 1px solid #ff9900;}  
  5. .pager li:hover a{color: #ff9900;}  
  6. .pager li a{color: #464646;}  
  7. .pager li span{color: #cfcfcf;}  
  8. .pager li.currentPage{border: 1px solid #ff9900; background-color: #ff9900;}  
  9. .pager li.currentPage span{font-weight: bold; color: #ffffff;}  
  10. .pager li.pageInfo{color: #464646; border: none; background: none;}  
  11. .pager li.pageTo{height:20px; color: #464646; border: none; background: none;}  
  12. .pager li.pageTo input{line-height: 20px;}  
  13. .pager li.pageTo input.pageToNum{width: 20px; height: 18px; margin-top: 0px; border: 1px solid #cccccc; display:table-cell; vertical-align:top;}  
  14. .pager li.pageTo input.formButton {width: 40px; background: #F3F3F3;  height: 20px;}  
  15. .pager li.pageTo input.formButton:hover {background: #ff9900; color: #ffffff;}  

 此外验证框架使用了formValidator.js,需要jquery支持。

  • 验证框架js.rar (51.4 KB)
  • 下载次数: 59
0 0
卖图片知乎 卖图片知乎
原创粉丝点击
热门IT博客
centos traceroute安装centos traceroute安装
山东省软件行业协会山东省软件行业协会
炒股软件指南针
守望先锋数据什么意思
kit plumber软件下载
津巴布韦通货膨胀知乎
udp 123端口
windows 修改系统语言
Mac古墓丽影手柄
阿里云挂载数据盘
云南扶贫大数据平台
广电网络突然不能上网
gpa的算法
哈哈少儿频道网络直播
nginx异步写入日志
苹果8蜂窝移动数据
淘宝购买射钉枪违法吗
流氓软件知乎
4px递四方 知乎
网络综合布线施工方案
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 蓝色奇迹 全新奇迹 奇迹时刻 手游奇迹mu 我们的奇迹 什么奇迹 奇迹暖 奇迹私发 奇迹英文 奇迹论坛 造就奇迹 奇迹的 奇迹出现 再现奇迹 见证奇迹 奇迹加点 洛杰斌奇迹 奇迹系列 玖月奇迹歌曲 奇迹男孩观后感 莱斯特城奇迹 玖月奇迹是不是夫妻 绿里奇迹剧情介绍 奇迹男孩英语 奇迹的近义词 绿里奇迹剧情 玖月奇迹资料 奇迹的意思是什么 奇迹mu手机版安卓 奇迹是什么意思 手游mu全民奇迹 全民奇迹什么职业好 手机版奇迹mu 全民奇迹mu攻略 全民奇迹mu修改器 全民奇迹mu开服表 全民奇迹神器 全民奇迹mu下载 全民奇迹mu魔剑归来 奇迹mu私发网 奇迹mu装备大全

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里