Flask/JS分页优化问询：实现每页仅显示10个动态页码

我来帮你解决这个分页页码展示的问题！这种动态显示有限页码的需求很常见，既避免了页码过多杂乱，又能让用户快速跳转。下面是完整的实现思路和代码，适配你的Flask项目：

首先明确页码展示的规则，兼顾用户体验和逻辑合理性：

• 当总页数≤10时，直接显示所有页码，不用纠结
• 当总页数>10时：
  • 如果当前页是前6页（比如第1-6页），显示1-10，保证用户能快速访问前面的页
  • 如果当前页是最后6页，显示最后10个页码（比如总页数20，当前页15-20时，显示11-20）
  • 其他情况，显示以当前页为基准的10个页码（比如你说的点击第9页时，显示6-15，可按需调整偏移让当前页处于合适位置）

处理总页数计算、当前页校验，以及生成要展示的页码范围：

from flask import Flask, request, render_template
import math

app = Flask(__name__)

@app.route('/your-page')  # 替换成你的实际路由路径
def your_page():
    # 替换为你的实际数组总长度
    result_arr_count = len(your_result_array)
    per_page = 10
    # 向上取整计算总页数，避免余数页数据丢失
    num_pages = math.ceil(result_arr_count / per_page)
    
    # 获取当前页，默认值为1，确保是整数类型
    current_page = request.args.get('page', 1, type=int)
    # 边界校验，防止非法页码（比如小于1或大于总页数）
    current_page = max(1, min(current_page, num_pages))
    
    # 设置要显示的页码数量
    display_page_count = 10
    start_page = 1
    end_page = num_pages
    
    if num_pages > display_page_count:
        half = display_page_count // 2
        # 当前页在前半段，显示前10页
        if current_page <= half + 1:
            end_page = display_page_count
        # 当前页在后半段，显示最后10页
        elif current_page >= num_pages - half:
            start_page = num_pages - display_page_count + 1
        # 中间区域，显示当前页前后的页码
        else:
            # 让当前页在显示集的第4位（前3个，后6个），可按需调整offset值
            offset = 3
            start_page = current_page - offset
            end_page = start_page + display_page_count - 1
    
    # 生成要展示的页码列表
    page_range = range(start_page, end_page + 1)
    
    # 计算数据切片范围，获取当前页的内容
    start_idx = (current_page - 1) * per_page
    end_idx = start_idx + per_page
    current_data = your_result_array[start_idx:end_idx]
    
    # 把参数传给前端模板
    return render_template(
        'your-template.html',
        current_page=current_page,
        num_pages=num_pages,
        page_range=page_range,
        current_data=current_data
    )

在你的Flask模板里，渲染分页控件和当前页数据：

<!-- 渲染当前页的数据 -->
<div class="data-container">
    {% for item in current_data %}
        <div class="data-item">{{ item }}</div>
    {% endfor %}
</div>

<!-- 分页控件 -->
<div class="pagination">
    <!-- 上一页按钮 -->
    {% if current_page > 1 %}
        <a href="?page={{ current_page - 1 }}" class="page-btn">← 上一页</a>
    {% else %}
        <span class="page-btn disabled">← 上一页</span>
    {% endif %}

    <!-- 页码按钮 -->
    {% for page_num in page_range %}
        {% if page_num == current_page %}
            <span class="page-btn current">{{ page_num }}</span>
        {% else %}
            <a href="?page={{ page_num }}" class="page-btn">{{ page_num }}</a>
        {% endif %}
    {% endfor %}

    <!-- 下一页按钮 -->
    {% if current_page < num_pages %}
        <a href="?page={{ current_page + 1 }}" class="page-btn">下一页 →</a>
    {% else %}
        <span class="page-btn disabled">下一页 →</span>
    {% endif %}
</div>

<!-- 可选：添加首页、末页和省略号，优化用户体验 -->
<div class="pagination-extra">
    {% if start_page > 1 %}
        <a href="?page=1" class="extra-btn">首页</a>
        <span class="ellipsis">...</span>
    {% endif %}

    {% if end_page < num_pages %}
        <span class="ellipsis">...</span>
        <a href="?page={{ num_pages }}" class="extra-btn">末页</a>
    {% endif %}
</div>

<!-- 简单样式优化，让分页控件更美观 -->
<style>
.pagination, .pagination-extra {
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-btn, .extra-btn {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
}
.page-btn.current {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}
.page-btn.disabled {
    color: #ccc;
    border-color: #ccc;
    cursor: not-allowed;
}
.ellipsis {
    color: #666;
}
</style>

如果想让当前页更居中（比如点击9时显示5-14），可以修改后端里的offset值：

# 让当前页在显示集的中间位置（第5位），前后各4个页码
offset = 4
start_page = current_page - offset
end_page = start_page + display_page_count - 1

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