分页逻辑 | xurna

文章目录

1. 需求
1. 1.1. 分页规则
2. 1.2. 交互规则
2. 实现

今天突然觉得分页是个很有逻辑的东西，所以想拎出来讲讲。

需求

分页规则

根据页面内容数量，在页面底部居中显示页码数据。点击页码数字，跳转到相应页数加载内容。
1）不足10条时：不显示该页码栏
2）不足70条时：显示上一页 1-最大页码下一页
3）超过70条时：显示上一页 1 2 3 4 5 … 最大页码下一页

交互规则

1）【上一页】按钮始终不高亮，【下一页】按钮始终高亮；
2）当内容超过70条时，点击页码数X时做如下判断：
· 若X-1≤3，则显示：1至5 … 最大页码数。如下图：

· 若X-1>3并且最大页数Y-X>3，则将该页数按钮居中，显示：1 … X-1 X X+1 … Y。如下图：

· 若Y-X≤3，则依次显示：1 … Y-4 Y-3 Y-2 Y-1 Y。如下图：

实现

此处用的是后台分页处理，没有使用ajax来请求，只用来说明分页的逻辑，后台使用的语言为python。
代码如下：

{% set count = page['count']%}     #页数
{% set cur = int(page['cur'])%}    #当前页
{% set path = page['base_path']%}  #根路径

{%if count > 1%}        #当页码大于一页的时候
<div class="container">

    {%if cur > 1%}  #当前页码大于一的时候，可以点击上一页，否则上一页不可点击
    <a class="page" href="{{path}}/{{cur - 1}}">上一页</a>
    {%else%}
    <a class="page" href="javascript:;">上一页</a>
    {%end%}

    {%if count <= 7%}  #当页码小于7页的时候，展示所有的页数
        {%for p in range(1, count+1)%}
            <a class="page {%if p == cur%}page-active{%end%}"  href="{{path}}/{{p}}">{{p}}</a>
        {%end%}

    {%elif count > 7%} #当页码大于7页的时候

        {%if cur <= 4%}  #当前页码小于4页的时候，显示1至5   ...    最大页码数
            {%for p in range(1, 6)%}
                <a class="page {%if p == cur%}page-active{%end%}"  href="{{path}}/{{p}}">{{p}}</a>
            {%end%}
            <a class="page-no"  href="javascript:;">...</a>
            <a class="page"  href="{{path}}/{{count}}">{{count}}</a>

        {%elif cur >= (count - 3)%}  #当前页码在最后4页的时候，显示1  ...  Y-4  Y-3    Y-2   Y-1    Y
            <a class="page"  href="{{path}}/1">1</a>
            <a class="page-no"  href="javascript:;">...</a>
            {%for p in range(count-4, count+1)%}
                <a class="page {%if p == cur%}page-active{%end%}"  href="{{path}}/{{p}}">{{p}}</a>
            {%end%}

        {%else%}      #否则，页数在中间的时候，显示 1  ...  X-1   X    X+1  ...   Y
            <a class="page"  href="{{path}}/1">1</a>
            <a class="page-no"  href="javascript:;">...</a>
            {%for p in range(cur-1, cur+2)%}
                <a class="page {%if p == cur%}page-active{%end%}"  href="{{path}}/{{p}}">{{p}}</a>
            {%end%}
            <a class="page-no"  href="javascript:;">...</a>
            <a class="page"  href="{{path}}/{{count}}">{{count}}</a>
        {%end%}

    {%end%}


    {%if cur < count%}  #当前页码小于页码的时候，可以点击下一页，否则下一页不可点击
    <a class="page page-active" href="{{path}}/{{cur+1}}">下一页</a>
    {%else%}
    <a class="page page-active" href="javascript:;">下一页</a>
    {%end%}

    <div style="clear: both"></div>
</div>
{%end%}

分页逻辑就讲到这里吧，有空我自己再用php实现了一个用ajax请求分页的代码哈。