ページネーション - Flask

  • 作成日:
  • 最終更新日:2025/10/11

インストール

ライブラリをインストールするには、以下のようにします。

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;
}

「 .sr-only 」は previous や next の文字を表示している span に割り当てられたクラス名です 。