自己写的freemarker分页

最新推荐文章于 2021-01-12 09:27:57 发布

原创最新推荐文章于 2021-01-12 09:27:57 发布 · 676 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种用于网站的分页组件设计思路，详细解释了如何根据不同页面数量显示合适的页码范围，确保用户体验的同时保持良好的交互性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="globalPage">
<#if ipage??>
<#if totalpage!=0>
<ul>
<#if ipage gt 1>
<li><a href="javascript:void(0);" onclick="goPrePage();">上一页</a></li>
<#else>
<li><a class="lastNone" href="javascript:void(0);" >上一页</a></li>
</#if>
<#if totalpage gt 8>
<#-- like 1 2 3 4 5 ... -->
<#if ipage lt 4>
<#list 1..4 as t>
<#if ipage == t>
<li><a class="pageChoose" href="javascript:void(0);" onclick="topage(${t})">${t}</a></li>
<#else>
<li><a href="javascript:void(0);" onclick="topage(${t})">${t}</a></li>
</#if>
</#list>
<li><a href="javascript:void(0);">...</a></li>
<li><a href="javascript:void(0);" onclick="topage(${totalpage})">${totalpage}</a></li>
</#if>
<#-- like ... 7 8 9 10 11... -->
<#if (totalpage-ipage) gt 2 && ipage gt 3 >
<li><a href="javascript:void(0);" onclick="topage(1)">1</a></li>
<#if ipage == 4>
<#else>
<li><a href="javascript:void(0);">...</a></li>
</#if>
<#list ipage-2..ipage+2 as t>
<#if ipage == t>
<li><a class="pageChoose" href="javascript:void(0);" onclick="topage(${t})">${t}</a></li>
<#else>
<li><a href="javascript:void(0);" onclick="topage(${t})">${t}</a></li>
</#if>
</#list>
<#if (totalpage-ipage) == 3>
<#else>
<li><a href="javascript:void(0);">...</a></li>
</#if>
<li><a href="javascript:void(0);" onclick="topage(${totalpage})">${totalpage}</a></li>
</#if>
<#-- like ... 7 8 9 10 11 -->
<#if totalpage-ipage lt 3>
<li><a href="javascript:void(0);" onclick="topage(1)">1</a></li>
<li><a href="javascript:void(0);">...</a></li>
<#list totalpage-3..totalpage as t>
<#if ipage == t>
<li><a class="pageChoose" href="javascript:void(0);" onclick="topage(${t})">${t}</a></li>
<#else>
<li><a href="javascript:void(0);" onclick="topage(${t})">${t}</a></li>
</#if>
</#list>
</#if>
<#-- like 1 2 3 4 5 6 7 -->
<#else>
<#list 1..totalpage as q>
<#if ipage == q>
<li><a class="pageChoose" href="javascript:void(0);" onclick="topage(${q})">${q}</a></li>
<#else>
<li><a href="javascript:void(0);" onclick="topage(${q})">${q}</a></li>
</#if>
</#list>
</#if>

<#if ipage lt totalpage>
<li><a class="next" href="javascript:void(0);" onclick="goLastPage();">下一页</a></li>
<#else>
<li><a class="lastNone" href="javascript:void(0);" >下一页</a></li>
</#if>
</ul>
</#if>
</#if>
</div>