一个分页器的逻辑
07 Jun 2017
六月的博文还没挤出来一篇,真是尴尬,之前再想瀑布流的实现和优化,但是卡在中间,就没咋去弄,先整理一下一直没整理的分页生成逻辑吧。
分页的主要使用背景
列表数据展示,当数据量比较大的时候,分页可以减轻后端查找以及接口返回数据大小,而且能减少多余的数据查询,前端则优化展示体验,过多数据会让页面显得复杂冗长,分页可以有效地管理数据展示,方便用户针对性查看数据。
顺带提一下,瀑布流转分页也是一大优化调整,新浪微博个人主页在下拉加载微博数据到一定量时,就会变为分页的形式。
分页的使用
分页的使用场景说来,其实有两种模式:
-
后端掌控分页,接口只返回数据总数和一页的数据量,通过接口参数才决定哪一页的数据,这种情况下,前端的分页页码可以是通过后端生成模板,也可以是前端直接根据页数和当前页来选择展示,点击不同页面带上不同页数参数去调用接口获取数据。
-
后端接口一次性返回所有数据,由前端来管理这些数据,自动分页,通过页码切换来显示不同页内容。
前端页码生成逻辑
综上,无论是后端返回全部数据还是部分数据,页码部分都要代码实现生成的,这里以前端的角度来实现页码生成(这样的话,一般分页内容主要是异步处理展示)
摘自使用项目的代码:基于jQuery,其实是抄自其它项目的分页,拿过来自己封了一下,比较糙
这段代码读起来有点复杂,主要是function内又是function的,不过其实主要核心思想也明了,那就是页码的输出逻辑。
如果只是10页内的页码,直接从第一页输出到第十页,篇幅不会太大,但如果是超过10页的情况下,每个页码都输出就有点尴尬了。这个时候就要区分好。
当页数超过10页时,优先显示当前页前后的页码,其他页码能省的省,不过首尾页码保留。
所以就有三种情况:
- 如果当前页比较靠近首页,比如前五页,那么直接输出
1,2,3,4,5,……,n
- 如果当前页比较靠近尾页,比如倒数五页内,那么直接输出
1,……,n-4,n-3,n-2,n-1,n
- 剩下的,假设当前页为x,则输出首尾页,和当前页码前后两页:
1,……,x-2,x-1,x,x+1,x+2,……,n
这里限定了页码范围值为10,显示页码为5,是比较合理的范围了。
还没分析过其它分页器的算法,不过单10页限定,我觉得也够用了~