原文地址
数据库实现分页
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">«</span>
</a>
</li>
{%- else -%}
<li>
{% if not kw %}
<a href="{{ url_for(url,number=number-1) }}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
{% else %}
<a href="{{ url_for(url,number=number-1,**kw) }}" aria-label="Previous">
<span aria-hidden="true">«</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">»</span>
</a>
</li>
{%- else -%}
<li>
{% if not kw %}
<a href="{{ url_for(url,number=number+1) }}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
{% else %}
<a href="{{ url_for(url,number=number+1,**kw) }}" aria-label="Next">
<span aria-hidden="true">»</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 %}
网友评论