学习Flask之分页插件flask_bootstrap

这次分页功能，主要是依靠 Flask-Bootstrap

首先也是下载flask_bootstrap

pip install flask_bootstrap

安装完后可以观察里面的文件夹

里面其实还有nav（导航），form（表单），pagination(分页)，table(表格)，还有一些常用的模板代码，这次分页要使用pagination.html，可以打开看一下

{#  This file was part of Flask-Bootstrap and was modified under the terms of
 its BSD License. Copyright (c) 2013, Marc Brinkmann. All rights reserved. #}

{% macro render_pager(pagination,
                      fragment='',
                      prev=('<span aria-hidden="true">&larr;</span> Previous')|safe,
                      next=('Next <span aria-hidden="true">&rarr;</span>')|safe,
                      align='') -%}
    <nav aria-label="Page navigation">
        <ul class="pagination {% if align == 'center' %}justify-content-center{% elif align == 'right' %}justify-content-end{% endif %}">
            <li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
                <a class="page-link"
                   href="{{ url_for(request.endpoint, page=pagination.prev_num, **kwargs) + fragment if pagination.has_prev else '#' }}">
                    {{ prev }}
                </a>
            </li>
            <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
                <a class="page-link"
                   href="{{ url_for(request.endpoint, page=pagination.next_num, **kwargs) + fragment if pagination.has_next else '#' }}">
                    {{ next }}
                </a>
            </li>
        </ul>
    </nav>
{%- endmacro %}

{% macro _arg_url_for(endpoint, base) %}
    {# calls url_for() with a given endpoint and **base as the parameters,
   additionally passing on all keyword_arguments (may overwrite existing ones)
 #}
    {%- with kargs = base.copy() -%}
        {%- do kargs.update(kwargs) -%}
        {{ url_for(endpoint, **kargs) }}
    {%- endwith %}
{%- endmacro %}

{% macro render_pagination(pagination,
                           endpoint=None,
                           prev=('&laquo;')|safe,
                           next=('&raquo;')|safe,
                           size=None,
                           ellipses='…',
                           args={},
                           fragment='',
                           align=''
                           )-%}
    {% if fragment != '' and not fragment.startswith('#') %}{% set fragment = '#' + fragment %}{% endif %}
    {% with url_args = {} %}
        {%- do url_args.update(request.view_args if not endpoint else {}),
       url_args.update(request.args if not endpoint else {}),
       url_args.update(args) -%}
        {% with endpoint = endpoint or request.endpoint %}
            <nav aria-label="Page navigation">
                <ul class="pagination{% if size %} pagination-{{ size }}{% endif %} {% if align == 'center' %}justify-content-center{% elif align == 'right' %}justify-content-end{% endif %}"{{ kwargs|xmlattr }}>
                    {# prev and next are only show if a symbol has been passed. #}
                    {% if prev != None -%}
                        <li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
                            <a class="page-link" href="{{ _arg_url_for(endpoint, url_args, page=pagination.prev_num) if pagination.has_prev else '#' }}{{ fragment }}">{{ prev }}</a>
                        </li>
                    {%- endif -%}

                    {%- for page in pagination.iter_pages() %}
                        {% if page %}
                            {% if page != pagination.page %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ _arg_url_for(endpoint, url_args, page=page) }}{{ fragment }}">{{ page }}</a>
                                </li>
                            {% else %}
                                <li class="page-item active">
                                    <a class="page-link" href="#">{{ page }} <span class="sr-only">(current)</span></a>
                                </li>
                            {% endif %}
                        {% elif ellipses != None %}
                            <li class="page-item disabled"><a class="page-link" href="#">{{ ellipses }}</a></li>
                        {% endif %}
                    {%- endfor %}

                    {% if next != None -%}
                        <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
                            <a class="page-link" href="{{ _arg_url_for(endpoint, url_args, page=pagination.next_num) if pagination.has_next else '#' }}{{ fragment }}">{{ next }}</a>
                        </li>
                    {%- endif -%}
                </ul>
            </nav>
        {% endwith %}
    {% endwith %}
{% endmacro %}

可以看到里面有三个 {% macro %}，render_pager() _arg_url_for() render_pagination（）
（简单解释一下这个macro ，可以当作是一个模板方法，将公共的html 封装成一个方法，然后直接调用，如果是PHP 的框架，一般都是写在一个php 的公共的方法里面的，现在写在模板Html中，用法都差不多）
大概看了一下这三个macro，
render_pager()是个分页，但是只会显示”上一页”，“下一页”，
_arg_url_for()是个路径连接的方法吧
render_pagination() 也是个分页，不过会详细显示

好了，现在正式开始

在extendsions.py 仲调用

from flask_bootstrap import Bootstrap
......
bootstrap = Bootstrap()

在__init__.py 初始化

bootstrap.init_app(app)

在数据库查找中，利用 paginate

from epay.config import POST_PER_PAGE #每页显示的行数

def index():
    page = request.args.get('page', 1, type=int)
    pagination = Order.query.order_by(Order.created_at.desc()).paginate(page, per_page=POST_PER_PAGE)
    posts = pagination.items
    return render_template('admin/order/index.html',pagination=pagination, posts=posts)

模板显示：

{% extends 'admin/base.html' %}
{% from 'bootstrap/pagination.html' import render_pagination %}

{% block content %}
<div class="container-fluid">
    <div class="row column_title">
       <div class="col-md-12">
          <div class="page_title">
             <h2>Invoice <small>( user invoice design )</small></h2>
          </div>
       </div>
    </div>
    <!-- row -->
    <div class="row">
       <!-- invoice section -->
       <div class="col-md-12">
         <div class="white_shd full margin_bottom_30">
            <div class="table_section padding_infor_info">
               <div class="table-responsive-sm">
                  <table class="table">
                     <thead>
                        <tr>
                           <th>#</th>
                           <th>Status</th>
                           <th>Order No</th>
                           <th>Amount</th>
                           <th>Email</th>
                           <th>Phone</th>
                           <th>Create Time</th>
                           <th>Action</th>
                        </tr>
                     </thead>
                     <tbody>
                        {% if posts %}
                        {% for v in posts  %}
                           <tr>
                              <td>{{ v.id }}</td>
                              <td>{{ v.status }}</td>
                              <td>{{ v.order_no }}</td>
                              <td>{{ v.amount }}</td>
                              <td>{{ v.email }}</td>
                              <td>{{ v.phone }}</td>
                              <td>{{ v.created_at }}</td>
                              <td>
                                 <a class="btn font-white btn-primary" href="{{ url_for('admin.order.detail',order_no=v.order_no)}}">
                                    <i class="fa fa-edit"></i>
                                 </a>

                                 <a class="btn font-white btn-danger" href="{{ url_for('admin.order.delete',order_no=v.order_no)}}">
                                    <i class="fa fa-remove"></i>
                                 </a>
                              </td>
                           </tr>
                        {% endfor %}
                        {% endif %}
                     </tbody>
                  </table>
                  <div class="page-footer">{{ render_pagination(pagination) }}</div>
               </div>
            </div>
         </div>
      </div>
    </div>
 </div>
{% endblock content %}