5分钟了解分页的那些事?

写在前面

最近面试,我问了一个非常通用的问题,题目是什么呢?  题目就是,谈谈你对分页里面逻辑的理解以及如何实现的?面试题目不难,但是90%的人讲不清楚分页逻辑,对分页的一些细节问题更是回答的很模糊。不是很清晰。下面借此机会给大家讲讲分页有哪些逻辑。

分页的那些事

1539245552(1)

如上图所示: 分页包含很多小细节,

每页展示10条,多余的下一页展示,这里就涉及的知识点有,是否采取逻辑分页还是物理分页,物理分页的实现方式有哪些,各位自行百度,这里主要讲前台页面如何编写分页的逻辑

<#– 是否上一页–>

<#if page.hasPreviousPage>
<li><a class=”pointer” data-page=”1″>首页</i></a></li>
<li><a class=”pointer” data-page=”${page.prePage}”>上一页</i></a></li>
</#if>

<#–处理开头部分逻辑 开头省略号实现逻辑–>

<#if (page.navigateFirstPage = 2)>
<li><a class=”pointer” data-page=”1″>1</a></li>
<#elseif (page.navigateFirstPage > 2)>
<li><a class=”pointer” data-page=”1″>1</a></li>
<li>…</li>
</#if>

<#– 是否下一页–>

<#if page.hasNextPage>
<li><a class=”pointer active” data-page=”${page.nextPage}”>下一页</i></a></li>
<li><a class=”pointer” data-page=”${page.pages}”>尾页</i></a></li>
</#if>

<#–处理结果部分显示的逻辑 开头省略号实现逻辑–>

<#if (page.navigateLastPage = page.pages-1)>
<li><a class=”pointer” data-page=”${page.pages}”>${page.pages}</a></li>
<#elseif (page.navigateLastPage < page.pages-1)>
<li>…</li>
<li><a class=”pointer” data-page=”${page.pages}”>${page.pages}</a></li>
</#if>

<#– 中间显示页数–>

<#list page.navigateFirstPage..page.navigateLastPage as item>
<li><a ${(page.pageNum == item)?string(‘class=”pointer active”‘,’class=”pointer” data-page=”${item?c}”‘)}>${item?c}</a></li>
</#list>

<#– 显示总页数–>

  <li> 共 ${page.pages} 页 </li>

 分页的实现

上面分页的逻辑已经讲的比较清晰,逻辑需求理解清楚了,实现起来就简单了,这里要提醒大家的是,一个系统很多地方都有可能用到分页,所以大家最好封装成一个通用的组件,以便项目中实现复用。还有最后啰嗦一句,分页虽然不难,但是做一个通用的且体验感很强的分页组件需要大家去下一翻功夫。

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » 5分钟了解分页的那些事?

赞 (1)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址