分页器标签可用于快速创建“Google”风格的分页器,如下所示 -

Paginator 标签可以在页面、评论和搜索标签中使用。例子 - pages, comments and search tags. Example -
<cms:paginator />
Please see Core Concepts - Pagination for a detailed usage example.
参数
- simple
- position
- adjacents
- prev_text
- next_text
simple
如果您希望此标记显示简单的“下一个”和“上一个”分页器,而不是 Google 风格的分页器,请将此参数设置为“1”。
position
默认情况下,此标签在最后一条记录之后的底部显示分页器。要使分页器显示在顶部,请将此参数设置为“1”。默认值为“0”。
adjacents
始终显示的按钮数量可以通过此参数更改。
prev_text
“prev_text”按钮中使用的文本可以通过此参数设置。默认为“« prev”(« prev)
next_text
"next_text"按钮中使用的文本可以通过此参数设置。默认为“下一个”(下一个»)
变量
默认情况下该标签是自关闭的,并且不设置自己的任何变量,你可以查看输出的html,自行定义css样式。
但是我们如何精确定义自己的html分页呢?
这个标签可以以标签对的形式出现
<cms:paginator adjacents='1'> ... </cms:paginator>
使用标签对的时候,cms提供以下变量用于定义自己的分页器。
k_crumb_type // one of these 4: 'next', 'prev', 'ellipsis' or 'page' k_crumb_disabled // pertinent for only 'next' and 'prev' k_crumb_current // pertinent for only 'page' k_crumb_link k_crumb_text
以下提供一个实例,用于完全自定义自己的分页:
<cms:pages masterpage=k_template_name paginate='1' limit='1' orderby='weight' order='asc'> <div class="pagination uk-flex uk-flex-middle"> <cms:paginator adjacents='1'> <cms:if k_crumb_type='prev' > <div class="prev_page page_arrow"> <a <cms:if k_crumb_disabled>href="#" onClick="return false"<cms:else />href="<cms:show k_crumb_link />"</cms:if>><span><i uk-icon="chevron-left"></i></span> <em>上一页</em></a> </div> </cms:if> <ul> <cms:if k_crumb_type='ellipsis' > <li><a href="#" onClick="return false">…</a></li> </cms:if> <cms:if k_crumb_type='page' > <cms:if k_crumb_current> <li class="active"><a href="#" onClick="return false" title="<cms:show k_crumb_text />"><cms:show k_crumb_text /></a></li> <cms:else /> <li><a href="<cms:show k_crumb_link />" title="<cms:show k_crumb_text />"><cms:show k_crumb_text /></a></li> </cms:if> </cms:if> </ul> <cms:if k_crumb_type='next' > <div class="next_page page_arrow"> <a <cms:if k_crumb_disabled>href="#" onClick="return false"<cms:else />href="<cms:show k_crumb_link />"</cms:if>><em>下一页</em> <span><i uk-icon="chevron-right"></i></span></a> </div> </cms:if> </cms:paginator> </div> </cms:pages>