flask实现分页

数据库实现分页

offset

使用offset可以实现数据库分页功能

questions = Questions.query.offset(num) # 从num开始

limit

使用limit实现限制每页的文章数量

questions = Questions.query.offset(num).limit(6) #每页显示6篇文章

前端实现分页

需求设计

是使用上一页，下一页，用表单进行跳转,还是使用数字显示

获得文章数量 pages,和当前页码 number

简单的上一页，下一页

因为我的设计不是这个，所以简单说一下

下一页,上一页

jinja2 代码

<a href="{{ url_for('blog.index',number=number + 1)}}">下一页</a>
<a href="{{ url_for('blog.index',number=number - 1)}}">下一页</a>

首页没有上一页，尾页没有下一页

{% if number == pages %}
no next page
{% else %}
 <a href="{{ url_for('blog.index',number=number + 1)}}">下一页</a>
{% endif %}
{% if number == 1 %}
no previous page
{% else %}
 <a href="{{ url_for('blog.index',number=number - 1)}}">上一页</a>
{% endif %}

显示各个页码的分页

搞了一下午,终于搞定了

设计

总页码小于7,显示所有页码,总页码大于7，显示当前页码以及当前页码前两页和后两页. 当页码大于7时,当前页码小于4,显示1~6页的页码·····

使用

{{ import 'base/page.html' as page }}
number为当前页码,pages为总共的页码
{{ page.page('blog.index',number=number,pages=pages)}}
如果url_for需要加参数，使用
{{ page.page('blog.index',number=number,pages=pages,kw=dict(tag=tag))}}

源码

给出源码

{% macro page(url,number=1,pages=1,kw=None) -%}
<div style="text-align:center;margin-top:-15px">
    <ul class="pagination">
        {%- if number == 1 %}
        <li class="disabled">
            <a aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        {%- else -%}
        <li>
            {% if not kw %}
            <a href="{{ url_for(url,number=number-1) }}" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
            {% else %}
            <a href="{{ url_for(url,number=number-1,**kw) }}" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
            {% endif -%}
        </li>
        {% endif -%}

        {% if pages < 7 %}
        {% for page in range(1,pages + 1) %}
        {{ page_url(url,page,number,kw) }}
        {% endfor %}
        {% else %}
        {% if number <= 4 %}
        {% for page in range(1,6) %}
        {{ page_url(url,page,number,kw) }}
        {% endfor %}

        {%- if number <= pages - 2 %}
        <li class="disabled"><a>···</a></li>
        {%- endif -%}

        {{ page_url(url,pages,number,kw) }}
        {% else %}
        {{ page_url(url,1,number,kw) }}
        {{ page_url(url,2,number,kw) }}
        {{ page_dot_start(number)}}

        {% if number >= pages - 3 %}
        {% for page in range(number-2,pages + 1) %}
        {{ page_url(url,page,number,kw) }}
        {% endfor %}
        {% else %}
        {% for page in range(number-2,number + 3) %}
        {{ page_url(url,page,number,kw) }}
        {% endfor %}
        {{ page_dot_end(pages,number) }}
        {{ page_url(url,pages,number,kw) }}
        {% endif  %}

        {% endif  %}
        {% endif  %}


        {%- if number == pages %}
        <li class="disabled">
            <a aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
        {%- else -%}
        <li>
            {% if not kw %}
            <a href="{{ url_for(url,number=number+1) }}" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
            {% else %}
            <a href="{{ url_for(url,number=number+1,**kw) }}" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
            {% endif -%}
        </li>
        {% endif -%}
    </ul>
</div>
{% endmacro %}

{% macro page_url(url,page,number,kw) -%}
{%- if page == number %}
<li class="active">{{ page_kw(url,page,kw)}}</li>
{%- else -%}
<li>{{ page_kw(url,page,kw)}}</li>
{%- endif -%}
{% endmacro %}

{% macro page_dot_end(pages,number) -%}
{%- if number <= pages - 4 %}
<li class="disabled"><a>···</a></li>
{%- endif -%}
{% endmacro %}

{% macro page_dot_start(number) -%}
{%- if number > 5 %}
<li class="disabled"><a>···</a></li>
{%- endif -%}
{% endmacro %}

{% macro page_kw(url,page,kw) -%}
{% if not kw %}
<a href="{{ url_for(url,number=page) }}">{{ page }}</a>
{% else %}
<a href="{{ url_for(url,number=page,**kw) }}">{{ page }}</a>
{%- endif -%}
{% endmacro %}