如何在Flask+Peewee项目中实现带页码显示的分页功能？

我来帮你搞定带数字页码的分页！你之前的尝试方向是对的，但在循环变量和链接参数上出了点小问题，咱们一步步修正，实现那种带数字、高亮当前页、还能处理多页省略号的效果。

第一步：添加页码范围生成工具（可选但更优雅） #

先在你的__init__.py里加一个上下文处理器，用来生成合理的页码范围（避免页数太多时显示几十上百个页码）：

from flask import Flask
import urllib

app = Flask(__name__)

# 保留你原来的clean_querystring过滤器
@app.template_filter('clean_querystring')
def clean_querystring(request_args, *keys_to_remove, **new_values):
    querystring = dict((key, value) for key, value in request_args.items())
    for key in keys_to_remove:
        querystring.pop(key, None)
    querystring.update(new_values)
    return urllib.parse.urlencode(querystring)

# 新增：生成页码范围的工具函数
@app.context_processor
def utility_processor():
    def get_page_range(current_page, total_pages, delta=2):
        # 显示当前页前后各delta页，同时保证不越界
        start = max(1, current_page - delta)
        end = min(total_pages, current_page + delta)
        
        pages = []
        # 处理首页和省略号
        if start > 1:
            pages.append(1)
            if start > 2:
                pages.append(None)  # 用None表示省略号
        
        # 添加中间的页码
        pages.extend(range(start, end + 1))
        
        # 处理尾页和省略号
        if end < total_pages:
            if end < total_pages - 1:
                pages.append(None)
            pages.append(total_pages)
        
        return pages
    return dict(get_page_range=get_page_range)

第二步：重写分页模板pagination.html #

替换你原来的模板代码，实现上一页、数字页码、下一页的完整效果：

{% if pagination.get_page_count() > 1 %}
<div class="pagination-container">
  <ul class="pagination">
    <!-- 上一页按钮 -->
    {% if pagination.get_page() > 1 %}
    <li class="page-item">
      <a class="page-link" href="./?{{ request.args|clean_querystring('page', page=pagination.get_page() - 1) }}">
        &laquo; Previous
      </a>
    </li>
    {% else %}
    <li class="page-item disabled">
      <a class="page-link" href="#">&laquo; Previous</a>
    </li>
    {% endif %}

    <!-- 数字页码部分 -->
    {% set page_range = get_page_range(pagination.get_page(), pagination.get_page_count()) %}
    {% for page_num in page_range %}
      {% if page_num %}
        <li class="page-item {% if page_num == pagination.get_page() %}active{% endif %}">
          <a class="page-link" href="./?{{ request.args|clean_querystring('page', page=page_num) }}">
            {{ page_num }}
          </a>
        </li>
      {% else %}
        <li class="page-item disabled">
          <span class="page-link">...</span>
        </li>
      {% endif %}
    {% endfor %}

    <!-- 下一页按钮 -->
    {% if pagination.get_page_count() > pagination.get_page() %}
    <li class="page-item">
      <a class="page-link" href="./?{{ request.args|clean_querystring('page', page=pagination.get_page() + 1) }}">
        Next &raquo;
      </a>
    </li>
    {% else %}
    <li class="page-item disabled">
      <a class="page-link" href="#">Next &raquo;</a>
    </li>
    {% endif %}
  </ul>
</div>
{% endif %}

关键修正点说明 #

1. 循环变量错误：你之前用{% for page_num in page %}，但page变量根本没定义，现在我们用get_page_range生成的合理页码范围来循环。
2. 链接参数错误：你之前所有页码链接都用了pagination.get_page()（当前页），现在改成循环的page_num，点击不同页码才会跳转到对应页面。
3. 当前页高亮：通过给当前页的li标签加active类，配合Bootstrap样式就能高亮显示当前页码。
4. 省略号处理：当总页数很多时，不会显示所有页码，而是用...省略中间的页码，同时保留首页和尾页的链接。

样式说明 #

这个模板用了Bootstrap的pagination组件样式，如果你的项目没用到Bootstrap，可以自己调整class里的样式名，改成你自己的CSS类即可。

内容的提问来源于stack exchange，提问作者Ismail9403