Вот простое пошаговое руководство о том, как реализовать разбиение на страницы во Flask.

Flask известен тем, что он легкий и помогает создавать как можно быстрее, если вы достаточно хорошо разбираетесь в них.

Наша задача: вернуть все доступные цвета с разбивкой по пяти элементам на страницу.

  1. Определите данные из серверной части. (Вы должны были добавить цвета в свою таблицу цветов в базе данных.)
@app.route('/colors')
@login_required
def colors():
    # Get the data from the database
    colors = Color.query.all()
    return render_template('colors/all_colors.html', colors=colors)

2. Отобразите элементы на странице.

<div class="table-responsive">
    <table class="table table-sm table-borderless mb-0">
        <thead class="thead-dark">
            <tr>
                <th>S/N</th>
                <th>Color Name</th>
                <th>Date Created</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for color in colors %}
            <tr>
                <th scope="row">{{ loop.index }}</th>
                <td>{{ color.name }}</td>
                <td>{{ color.created_at }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

После этого будут отображены все цвета.

Теперь часть разбивки на страницы

3. Измените представление, чтобы оно соответствовало разбивке на страницы.

ROWS_PER_PAGE = 5
@app.route('/colors')
@login_required
def colors():
    # Set the pagination configuration
    page = request.args.get('page', 1, type=int)

    colors = Color.query.paginate(page=page, per_page=ROWS_PER_PAGE)
    return render_template('colors/all_colors.html', colors=colors)

Результаты разбиваются на страницы с помощью функции разбиения на страницы Flask SQLAlchemy с любым количеством аргументов по желанию. Результатом вызова функции paginate() является объект разбиения на страницы, который имеет множество методов, которые могут помочь вам достичь желаемого результата. Подробнее об этом вы можете прочитать в документации.

4. Измените шаблон отображения.

Чтобы отобразить элементы, вы должны вызвать метод .items объекта colors разбиения на страницы, определенного в серверной части.

<div class="table-responsive">
    <table class="table table-sm table-borderless mb-0">
        <thead class="thead-dark">
            <tr>
                <th>S/N</th>
                <th>Color Name</th>
                <th>Date Created</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for color in colors.items %}
            <tr>
                <th scope="row">{{ loop.index }}</th>
                <td>{{ color.name }}</td>
                <td>{{ color.created_at }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

Возвращается только пять элементов, потому что мы установили ROWS_PER_PAGE = 5.

5. Добавьте кнопки разбивки на страницы для навигации по страницам.

<!-- Pagination Links-->
<div class="text-right">
    <a href="{{ url_for('colors', page=colors.prev_num) }}"
       class="btn btn-outline-dark 
       {% if colors.page == 1 %}disabled{% endif %}">
        &laquo;
    </a>
<!-- Loop through the number of pages to display a link for each-->
    {% for page_num in colors.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
{% if page_num %}
<!-- Check for the active page and set the link to "Active"-->
            {% if colors.page == page_num %}
            <a href="{{ url_for('colors', page=page_num) }}"
               class="btn btn-dark">
                {{ page_num }}
            </a>
            {% else %}
            <a href="{{ url_for('colors', page=page_num) }}"
               class="btn btn-outline-dark">
                {{ page_num }}
            </a>
            {% endif %}
        {% else %}
            ...
        {% endif %}
    {% endfor %}
    <a href="{{ url_for('colors', page=colors.next_num) }}"
       class="btn btn-outline-dark 
       {% if colors.page == colors.pages %}disabled{% endif %}">
        &raquo;
    </a>
</div>
<p class="text-right mt-3">
   Showing page {{ colors.page }} of {{ colors.pages }}
</p>

И вот ваш результат:

Надеюсь, вам понравился этот простой урок.