Flask分页搜索切换页面筛选条件重置问题求助

核心问题原因 #

1. 分页链接为GET请求，但后端仅在POST提交表单时处理搜索条件，GET请求直接返回全量数据
2. 分页链接虽传递了tag参数，但后端未在GET请求中接收并使用该参数做筛选
3. 搜索表单提交后未保留输入关键词，体验不佳

修复方案 #

1. 后端代码修改（summary.py） #

统一处理GET/POST请求的搜索参数，复用筛选逻辑：

from flask import render_template, request
from sqlalchemy import or_

from sweater.models import Summary_all_filter
from sweater import app


# 修正路由，避免与其他路由冲突
@app.route('/summary', methods=['GET', 'POST'], defaults={"page": 1})
@app.route('/summary/<int:page>', methods=['GET', 'POST'])
def summary(page):
    per_page = 15
    # 同时从POST表单和GET参数获取搜索关键词
    tag = request.form.get("search", request.args.get("tag", ""))
    search_pattern = "%{}%".format(tag)

    # 基础查询构建
    query = Summary_all_filter.query.order_by(Summary_all_filter.source)
    
    # 非空关键词才应用筛选
    if tag.strip():
        query = query.filter(or_(
            Summary_all_filter.serial_number.like(search_pattern),
            Summary_all_filter.source.like(search_pattern),
            Summary_all_filter.object.like(search_pattern),
            Summary_all_filter.hostname.like(search_pattern),
            Summary_all_filter.worker.like(search_pattern),
            Summary_all_filter.ip_addres.like(search_pattern),
            Summary_all_filter.model.like(search_pattern),
            Summary_all_filter.owner.like(search_pattern),
            Summary_all_filter.redirect.like(search_pattern)
        ))
    
    # 执行分页
    result = query.paginate(per_page=per_page, page=page, error_out=False)
    
    return render_template('summary.html', result=result, tag=tag)

2. 前端代码修改（summary.html） #

优化表单保留关键词，确保分页链接携带筛选参数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Summary</title>
    <link type="text/css" href="{{url_for('static', filename='css/summary.css')}}" rel="stylesheet"/>
    <script type="text/javascript" src="{{url_for('static', filename='js/search.js')}}"></script>
</head>
<body>
<div class="table-content">
 <table class="myTabel">
    <tbody>
    {% for el in result.items %}
        <tr>
            <td>{{ el.source }}</td>
            <td>{{ el.object }}</td>
            <td>{{ el.hostname }}</td>
            <td>{{ el.ip_addres }}</td>
            <td>{{ el.status }}</td>
            <td>{{ el.mac_address }}</td>
            <td>{{ el.serial_number }}</td>
            <td>{{ el.worker }}</td>
            <td>{{ el.owner }}</td>
            <td>{{ el.redirect }}</td>
            <td>{{ el.plata_no_repair }}</td>
            <td>{{ el.plata_removed }}</td>
            <td>{{ el.model }}</td>
            <td>{{ el.comment }}</td>
            <td>{{ el.result_power }}</td>
        </tr>
    {% endfor %}
    </tbody>
 </table>
</div>

<div>
    {% for page in result.iter_pages() %}
        {% if page %}
            <a href="{{ url_for('summary', page=page, tag=tag) }}">{{ page }}</a>
        {% else %}
            ...
        {% endif %}
    {% endfor %}
</div>

<!-- 改用GET请求，搜索参数可见且支持收藏；自动填充当前搜索关键词 -->
<form method="GET" action="{{ url_for('summary') }}">
    <div class="search">
        <h3>Search: {{ tag }}</h3>
        <h3>Global search:</h3>
        <input type="text" name="tag" id="search" class="search_text" value="{{ tag }}">
        <input class="search_submit" type="submit" value="Search">
    </div>
</form>
</body>
</html>

关键修改点说明 #

• 路由修正：将分页路由改为/summary/<int:page>，避免与其他路由冲突
• 参数统一处理：同时从POST表单和GET参数读取搜索关键词，确保分页时条件不丢失
• 查询逻辑复用：抽离基础查询，仅在有非空关键词时添加筛选条件，减少重复代码
• 表单优化：改用GET请求使搜索参数可见，搜索框自动填充当前关键词提升体验
• 分页参数传递：保持分页链接携带tag参数，确保切换页面时筛选条件持续生效

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