当表单和搜索结果在同一页面展示时,点分页按钮搜索结果显示不正确

目标:在一个页面上,同时显示表单和搜索结果。表单用于选择数据库查询的条件,搜索结果可以使用分页导航。

遇到的问题:第一次进入页面,一切正常,搜索功能也可以正常的使用,搜索出来的结果也是正确的。但是点击分页导航的下一页,页面刷新,搜索的结果会返回到首次进入页面的搜索结果的第二页,这与想要查看的界面不一致。

思考:仔细想一想,好像这样也没有问题,因为正确的搜索结果只有在表单提交后才能显示,但是在每一次进入视图函数后,表单并没有提交,所以显示的结果不正确。但是我看来看去,不知道从哪里改起。所以来这里求助了。

表单

class AskConditiondForm(FlaskForm):
    ask_condition = ['存放状态', '牌号', '班别', '机台号', '来料情况', '工号', '姓名']
    select_ask_condition = SelectField("查找类型", choices=ask_condition, validators=[DataRequired()])
    content_box = StringField("查找内容", validators=[DataRequired()])
    submit = SubmitField('搜索')

视图函数

@main.route('/search_record', methods=['GET', 'POST'])
def search_record():
    form = AskConditiondForm()
    page = request.args.get('page', 1, type=int)
    pagination = NewGoodsList.query.order_by(NewGoodsList.Datetime_id.desc()).paginate(page=page, per_page=20, error_out=False)
    newrecords = pagination.items
    if form.validate_on_submit():
        if form.select_ask_condition.data == '存放状态':
            page = request.args.get('page', 1, type=int)
            pagination = NewGoodsList.query.filter(NewGoodsList.state == form.content_box.data).\
                paginate(page=page, per_page=5, error_out=False)
            newrecords = pagination.items
            return render_template('search_record.html', newrecords=newrecords, pagination=pagination, form=form)
        elif form.select_ask_condition.data == '牌号':
            page = request.args.get('page', 1, type=int)
            pagination = NewGoodsList.query.filter(NewGoodsList.brand == form.content_box.data). \
                paginate(page=page, per_page=5, error_out=False)
            newrecords = pagination.items
            return render_template('search_record.html', newrecords=newrecords, pagination=pagination, form=form)
        elif form.select_ask_condition.data == '班别':
            page = request.args.get('page', 1, type=int)
            pagination = NewGoodsList.query.filter(NewGoodsList.shift == form.content_box.data). \
                paginate(page=page, per_page=5, error_out=False)
            newrecords = pagination.items
            return render_template('search_record.html', newrecords=newrecords, pagination=pagination, form=form)
        elif form.select_ask_condition.data == '机台号':
            page = request.args.get('page', 1, type=int)
            pagination = NewGoodsList.query.filter(NewGoodsList.machine_no == form.content_box.data). \
                paginate(page=page, per_page=5, error_out=False)
            newrecords = pagination.items
            return render_template('search_record.html', newrecords=newrecords, pagination=pagination, form=form)
        elif form.select_ask_condition.data == '来料情况':
            page = request.args.get('page', 1, type=int)
            pagination = NewGoodsList.query.filter(NewGoodsList.goods_type == form.content_box.data). \
                paginate(page=page, per_page=5, error_out=False)
            newrecords = pagination.items
            return render_template('search_record.html', newrecords=newrecords, pagination=pagination, form=form)
        elif form.select_ask_condition.data == '工号':
            page = request.args.get('page', 1, type=int)
            pagination = NewGoodsList.query.filter(NewGoodsList.operator_id == form.content_box.data). \
                paginate(page=page, per_page=5, error_out=False)
            newrecords = pagination.items
            return render_template('search_record.html', newrecords=newrecords, pagination=pagination, form=form)
        elif form.select_ask_condition.data == '姓名':
            flash("暂时还不支持该功能!")
            return render_template('search_record.html', form=form)
        else:
            flash("发生了意料之外的事!请联系管理员!")
    return render_template('search_record.html', form=form, newrecords=newrecords, pagination=pagination)

html

{% extends "base.html" %}
{% import "_macros.html" as macros %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}记录搜索{% endblock %}

{% block page_content %}
<div class="page-header" >
    <h1>记录搜索</h1>
</div>
{{ wtf.quick_form(form) }}
<hr>
{% if newrecords %}
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">操作时间</th>
                <th scope="col">存放状态</th>
                <th scope="col">牌号</th>
                <th scope="col">班别</th>
                <th scope="col">机台</th>
                <th scope="col">来料情况</th>
                <th scope="col">数量</th>
                <th scope="col">单位</th>
                <th scope="col">操作者</th>
                <th scope="col" style="width:300px">操作记录</th>
            </tr>
        </thead>
    {% for info in newrecords %}
        <tbody>
            <tr>
                <th scope="row">{{ info.Datetime_id }}</th>
                <th scope="row">{{ info.state }}</th>
                <th scope="row">{{ info.brand }}</th>
                <th scope="row">{{ info.shift }}</th>
                <th scope="row">{{ info.machine_no }}</th>
                <th scope="row">{{ info.goods_type }}</th>
                <th scope="row">{{ info.nums }}</th>
                <th scope="row">{{ info.unit }}</th>
                <th scope="row">{{ info.operator_id }}</th>
                <th scope="row">{{ info.notes }}</th>
            </tr>
        </tbody>
    {% endfor %}
    </table>
    <div>
        {{  macros.pagination_widget(pagination, '.search_record') }}
    </div>
{% else %}
    没有查询到任何记录!!
{% endif %}
{% endblock %}

分页模板宏

{% 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.page - 1, **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.page + 1, **kwargs) }}{% else %}#{% endif %}">
            &raquo;
        </a>
    </li>
</ul>
{% endmacro %}

最后:感谢各位大佬们的帮助!!

「遇到的问题」有点难理解,可以上传几个图例吗?

(如果代码放到了 GitHub,可以分享一下链接)

举个例子:我想查询当前存放在仓库中的货物,我进入了查询的界面。查询页面默认展示所有的数据。

page = request.args.get('page', 1, type=int)
pagination = NewGoodsList.query.order_by(NewGoodsList.Datetime_id.desc()).paginate(page=page, per_page=20, error_out=False)
newrecords = pagination.items

我通过表单提交查询条件,页面会更新查询到的数据。比如我提交的查询条件是存放状态,查询的值为“存”,那么页面展示的数据是:

page = request.args.get('page', 1, type=int)
pagination = NewGoodsList.query.filter(NewGoodsList.state == form.content_box.data).\
                paginate(page=page, per_page=5, error_out=False)
newrecords = pagination.items

页面正确显示当前存放的货物。

但是,当我点击翻页的按钮时,页面将不再显示当前存放的货物数据,取而代之的是进入首页默认显示的数据。

比如我点击第二页,显示的是首页默认数据的第二页,我想要到达的效果是显示当前存放的货物数据的第二页。

若要显示当前存放的货物数据,需要再提交一次表单,才能显示当前存放的货物数据的第二页。

我想到了三个办法。

第一个是给每一个查询的界面建立一个视图函数,这样没有表单的干扰,显示会是正常的。但是这样整个代码会看起来臃肿且重复。

第二个是放弃WTForms,改用JQuery,使用AJAX来更新数据的查询结果。但是翻页的宏应该是要重新写了。

第三个是首页那个向下滑动到底显示新的数据我感觉挺好的,请问那个是怎么做到的?

我大概理解了。其实这个表单看起来更像是起到过滤的功能而不是提交数据的功能,所以不如用 GET 请求来提交表单,把数据作为查询字符串提交到视图函数。视图函数每次都会读取 URL 里的查询字符串,然后结合这些参数来过滤数据。下面是一个大概的例子:

分页组件里的按钮也按照当前 request 信息来附加上这些查询字符串,这样每次跳转都会正确过滤数据。

第三个是首页那个向下滑动到底显示新的数据我感觉挺好的,请问那个是怎么做到的?

这个可以参考这里的示例

十分感谢!我研究研究。

按照例子修改后就没有问题了,分页按钮没有做调整,感谢大佬的指点!

不客气 :sunglasses: