Flask 实现分页展示数据（简单套路）

简单方法套路

1. 套用模板，定义宏。在templates里新建一个_macros.html，代码如下

{% macro pagination_widget(pagination, endpoint) %}
<ul class="pagination">
    <li{% if not pagination.has_prev %} class="disabled"{% endif %}>
        <a href="{% if pagination.has_prev %}{{ url_for(endpoint, page=pagination.prev_num, **kwargs) }}{% else %}#{% endif %}">
            &laquo;
        </a>
    </li>
    {% for p in pagination.iter_pages() %}
        {% if p %}
            {% if p == pagination.page %}
            <li class="active">
                <a href="{{ url_for(endpoint, page = p, **kwargs) }}">{{ p }}</a>
            </li>
            {% else %}
            <li>
                <a href="{{ url_for(endpoint, page = p, **kwargs) }}">{{ p }}</a>
            </li>
            {% endif %}
        {% else %}
        <li class="disabled"><a href="#">&hellip;</a></li>
        {% endif %}
    {% endfor %}
    <li{% if not pagination.has_next %} class="disabled"{% endif %}>
        <a href="{% if pagination.has_next %}{{ url_for(endpoint, page=pagination.next_num, **kwargs) }}{% else %}#{% endif %}">
            &raquo;
        </a>
    </li>
</ul>
{% endmacro %}

1. 在需要分页展示数据的页面html最前面添加一行代码，引入宏
2. 在需要分页展示数据的页面html中添加分页代码，如下。

{% import "_macros.html" as macros %}

......

{# 页面分页#}
  {% if pagination1 %}
      <div class="shop-pagination">
          {{ macros.pagination_widget(pagination1, '.shop') }}

1. 后端代码

	page1 = request.args.get('page', 1, type=int)  # 获取当前页数
    your_query = CommodityModel.query
    # current_app.config['PER_PAGE_COUNT']是在设置中定义的每页页数
    pagination1 = your_query.filter_by(type=1).paginate(page1, per_page=current_app.config['PER_PAGE_COUNT'],
                                      error_out=False)
    conditional_query = pagination1.items  # 每页的数据
    
    return render_template("shop.html", conditional_query=conditional_query, pagination1=pagination1)

其他

前端可以用for循环来实现数据的展示，这里我的代码是实现商品信息的遍历展示。

   {% for commodity in conditional_query %}
    <div class="single-product mb-30 wood-list-product-wrap">
        <div class="row align-items-xl-center">
            <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4">
                <div class="product-thumb mr-30 product-thumb-list w-img">
                    <img src ="{{ commodity.image_oss }}" alt="#">
                    <img src ="{{ commodity.image_oss }}" alt="#">
                </div>
            </div>
            <div class="col-xxl-8 col-xl-8 col-lg-8 col-md-8">
                <div class="wood-product-content wood-product-list-content">
                    <h4 class="pro-title pro-title-1"><a
                            href={{ url_for('front.product_details', commodity_id=commodity.id) }}>{{ commodity.name }}
                            </a></h4>
                    <div class="pro-price">
                        <span>${{ commodity.price }}</span>
                    </div>
                    <div class="rating">
                        <i class="fal fa-star active"></i>
                        <i class="fal fa-star active"></i>
                        <i class="fal fa-star"></i>
                        <i class="fal fa-star"></i>
                        <i class="fal fa-star"></i>
                    </div>
                    <p>This is introduce</p>
                    <div class="wood-shop-product-actions">
                        <a href="{{ url_for('front.product_details', commodity_id=commodity.id) }}" class="wood-cart-btn">See Details</a>
                        <a href="\#" class="wood-proudct-btn-boxed"><i
                                class="fal fa-heart"></i></a>
                        <a href="\#" class="wood-proudct-btn-boxed"><i
                                class="fal fa-layer-group"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}

用jinja2模板中的 {{ 数据|length }}就可以获取数据的长度，在这里就是共有几件商品

{% if conditional_query|length > 0 %}
<p class="show-total-result text-sm-center" id="show-total-result">Total of {{ conditional_query|length }} results</p>
{% else  %}
<p class="show-total-result text-sm-center" id="show-total-result">No results</p>
{% endif %}

结果展示

页码样式还可以用css美化