ページネーション - Flask

pip install flask-paginate

from flask import Blueprint, render_template, request, redirect
from flask_paginate import Pagination, get_page_parameter
from ..models.user import User

member = Blueprint("member", __name__, url_prefix='/member')

@member.route('/')
def index():
      # 一覧のレコードを取得
    users = User.query.all()
    
    # レコードの総数
    total=len(users)
    # 現在のページ番号を取得
    page = int(request.args.get(get_page_parameter(), 1))
    # ページごとの表示件数
    per_page = 10

    # 表示する範囲のデータを取得
    start = (page - 1) * per_page
    end = start + per_page
    results = users[start:end]
    
    # pagination.info の表示の変更
    table_name = "ユーザー"
    display_msg='{0}：{1} の中の {2} - {3}'.format(table_name, total, start, end)
    # ページネーションオブジェクトを作成
    pagination = Pagination(page=page, per_page=per_page, display_msg=display_msg, total=total)

    return render_template('member/index.html', users=results, pagination=pagination)

{%- extends "./share/layout.html" %}
{%- block content %}
    <h1>Member/index.html</h1>
    <div class="pagination-box">
        {{ pagination.info }}
        {{ pagination.links }}
    </div>
    
    <table>
        {% for user in users %}
        <tr>
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
        </tr>
        {% endfor %}
    </table>
{%- endblock %}

.pagination-box {
  margin-bottom: 20px;
}
.pagination-page-info {
  margin-bottom: 10px;
}
.pagination {
  list-style-type: none;
  display: flex;
  align-items: center;
  margin: 0 0 3px 0;
}
.pagination li {
  margin: 0 5px;
}
.pagination li.active a {
  font-weight: bold;
}
.pagination li a {
  text-decoration: none;
  color: #000;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.pagination .sr-only {
  display: none;
}