咨询1
咨询2
交流群
电话

Jspxcms分页的处理

文档 > 使用心得 2013-04-08 12:00 阅读

Jspxcms的一个亮点就是对分页的完美解决。

所有前台页面都可以共用一个分页,包括内容页分页、列表页分页、评论分页等等,使用非常简单。分页的模板制作也非常简单。

使用方式:只需将分页代码用include 标签包含即可。

示例:(其中page.html为分页代码)

[@InfoPage nodeId=node.id isMainNodeOnly='true' pageSize='10';pagedList]
  [#list pagedList.content as info]
  <li><a href="${info.url}">${substring(info.title,20,'...')}</a></li>
  [/#list]
  [#include 'page.html'/]
[/@InfoPage]

page.html代码:

<div class="page">
<a[#if page>1] href="${paging(1)}"[/#if] class="page-a">首页</a>
[#if page>1]
<a href="${paging(page-1)}" class="page-a">上一页</a>
[/#if]
[#assign start=page-4/][#if start<1][#assign start=1/][/#if]
[#assign end=start+8/][#if end>pagedList.totalPages][#assign end=pagedList.totalPages/][/#if][#if end<1][#assign end=1/][/#if]
[#if end-start<8][#assign start=end-8/][/#if][#if start<1][#assign start=1/][/#if]
[#list start..end as p]
<a[#if page!=p] href="${paging(p)}"[/#if] class="[#if page!=p]page-a[#else]page-curr[/#if]">${p}</a>
[/#list]
[#if page<pagedList.totalPages]
<a href="${paging(page+1)}" class="page-a">下一页</a>
[/#if]
<a[#if page<pagedList.totalPages] href="${paging(pagedList.totalPages)}"[/#if] class="page-a">末页</a>
<div style="clear:both;"></div>
</div>

样式:

.page{font-size:12px;}
.page-a{float:left;height:26px;line-height:26px;padding:0 8px;margin:0 3px;background-color:#f0f0f0;border:#cccccc solid 1px;}
.page-a:link,.page-a:visited{text-decoration:none;color:#000000;}
.page-a:hover,.page-a:active{text-decoration:none;color:#ff6600;}
.page-curr{float:left;height:26px;line-height:26px;padding:0 8px;margin:0 3px;background-color:#ffffff;border:#ff6600 solid 1px;color:#ff6600}
.page-curr:link,.page-curr:visited{text-decoration:none;color:#ff6600;}
.page-curr:hover,.page-curr:active{text-decoration:none;color:#ff6600;}