使用Flask - Page 0.4.5在一个页面上进行多页分页

Question

​

我想使用flask-paginate在一个页面上呈现三个页面。问题是这三个分页是“同步的”，点击其中一个分页的“下一页”也会影响另一个分页。我尝试过对不同的分页使用不同的页面名称，但仍然缺少一些东西。我没有找到任何关于多重分页的东西，请帮助我解决这个问题。请看附件中的图片，以便更好地理解。请注意，我按照Miguel Gringberg的书创建了这个应用程序，但他只考虑了单个页面，而不是多个页面。https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world

我有一个包含3个分页元素列表的页面''discover.html'‘：

<div class="discover-content">

        <div class="contests-list">
            {% with projects=contests, pagination=contests_pagination, page='main.discover', fragment='#contests' %}
                <h2>Most Recent Contests</h2>
                {% include '_contests.html' %}
            {% endwith %}
        </div>

        <div class="skills-list">
            {% with skills=skills, pagination=skills_pagination, page='main.discover', fragment='#skills' %}
                <h2>Skills</h2>
                {% include '_skills.html' %}
            {% endwith %}
        </div>

        <div class="ideas-list">
            {% with projects=ideas, pagination=ideas_pagination, page='main.discover', fragment='#ideas' %}
                <h2>Most Recent Ideas</h2>
                {% include '_ideas.html' %}
            {% endwith %}
        </div>

</div>

​

其中每个列表类似于下面的''_skills.html''：

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

<ul class="skills">
    {% for skill in skills %}
        {% if skill.name %}
        <li class="skill">{{ skill.name }}</li>
        {% endif %}
    {% endfor %}
</ul>

{% if pagination %}
    <div class="pagination">
        {{ macros.pagination_widget(pagination, page, fragment=fragment) }}
    </div>
{% endif %}

文件‘’_macs.html‘’是这样工作的：

{% macro pagination_widget(pagination, endpoint, fragment='') %}
<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) }}{{ fragment }}{% 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) }}{{ fragment }}">{{ p }}</a>
            </li>
            {% else %}
            <li>
                <a href="{{ url_for(endpoint, page = p, **kwargs) }}{{ fragment }}">{{ 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) }}{{ fragment }}{% else %}#{% endif %}">
            &raquo;
        </a>
    </li>
</ul>
{% endmacro %}

与页面“”discover.html“”关联的视图如下所示：

@main.route('/discover', defaults={'page_c': 1, 'page_i': 1, 'page_s': 1}, methods=['GET', 'POST'])
@main.route('/discover/page_c/<int:page_c>/page_i/<int:page_i>/page_s/<int:page_s>', methods=['GET', 'POST'])
def discover(page_c, page_i, page_s):

    contests_page = request.args.get(page_c, 1, type=int)
    contests_pagination = Project.query.filter_by(project_type='contest').order_by(Project.timestamp.desc()).paginate(
        contests_page, per_page=current_app.config['CONTESTS_PER_PAGE'], error_out=False)
    contests = contests_pagination.items

    ideas_page = request.args.get(page_i, 1, type=int)
    ideas_pagination = Project.query.filter_by(project_type='idea').order_by(Project.timestamp.desc()).paginate(
        ideas_page, per_page=current_app.config['IDEAS_PER_PAGE'], error_out=False)
    ideas = ideas_pagination.items

    skills_page = request.args.get(page_s, 1, type=int)
    skills_pagination = Skill.query.order_by(Skill.name.desc()).paginate(
        skills_page, per_page=current_app.config['SKILLS_PER_PAGE'], error_out=False)
    skills = skills_pagination.items


    return render_template('discover.html', contests=contests, ideas=ideas, skills=skills,
                           contests_pagination=contests_pagination, ideas_pagination=ideas_pagination,
                           skills_pagination=skills_pagination)

Answer 1

处理这种情况的最清晰的方法是使用异步请求(Ajax)。您的三个项目列表将有三个单独的终结点，每个单独分页。主HTML页面将向这三个端点发出Ajax请求，并且在一个列表中的页面之间移动应该完全不会影响其他两个列表。

如果您希望在一个页面中包含三个列表，则必须确保所有列表中的分页链接都包含所有三个列表的正确页码。例如，如果您在这三个列表上分别查看第1、2和3页，并单击第二个列表上的下一页，则下一页链接应转到/discover/page_c/1/page_i/3/page_s/3，以便第一个和第三个列表停留在它们的第1和3页上，而第二个列表从第2页移动到第3页。您的宏将需要更复杂，它需要知道这三个列表的页码，以及哪一个列表正在更改。