Python+Flask+Bootstrapで超簡単にページネーションを実装する方法(flask_paginate)

2021年6月9日

こんにちは、せつやです。

この記事では、Python Flaskによる、ページネーションの作り方を紹介しています。
これからページネーションを作ろうと思っている方の参考になれば幸いです。

是非みていってください。🙂

flask_paginate 完成イメージ

１、flask-paginateをPIPインストール

flask-paginateを実行環境にインストールします。

pip install flask-paginate

２、上記１、でインストールしたモジュールをインポート

#============================================================================================
# flask_paginate
#============================================================================================
from flask_paginate import Pagination, get_page_parameter

３、１ページに表示させるデータを分割し、必要なデータを用意する

#+------------------------------------------------------------------------------------------+
#+ トップページ
#+------------------------------------------------------------------------------------------+
# index.htmlを表示する場所を定義
@app.route('/')
def index():
  # ページに表示させたいデータが入っているリストを用意
	Data_List = MainData()

	# (1) 表示されているページ番号を取得(初期ページ1)
	page = request.args.get(get_page_parameter(), type=int, default=1)

	# (2)１ページに表示させたいデータ件数を指定して分割(１ページに3件表示)
	PageData = Data_List[(page - 1)*3: page*3]

	# (3) 表示するデータリストの最大件数から最大ページ数を算出
	MaxPage = (- len(Data_List) // 3) * -1

	# (4) ページネーションに必要なデータをHTMLファイルに引き渡します。
	return render_template('index.html', PageData = PageData, CurPage=page, MaxPage=MaxPage)

コードの補足説明

(1) 現在されているページ番号を取得する。

ここでは、index.htmlで現在表示させているページ番号を取得します。

default=1 の部分を変更することで
初期ページ(ページ番号を指定しないURL)に表示させるページを指定できます。

(2) １ページに表示させたいデータ件数を指定して分割(１ページに3件表示)

ここでは、Pythonのスライスを使用してデータリストに格納されている連続したデータをページ毎に
表示する分だけ分割して変数に格納をしています。

PageData = Data_List[(page – 1)*3: page*3]
3の部分を変更することで、表示件数を変更できます。

(3) データリストの最大件数と1ページに表示させる件数を元に最大ページ数を算出

上記（２）で指定した個数でデータを分割した場合何ページ分のデータになるかを算出しています。

MaxPage = (- len(Data_List) // 3) * -1

最大ページ数を算出しておくことで
ページネーションの終わりを条件に使用できるようにしておきます。

3の部分は、上記(2)同様１ページに表示させるデータ件数を指定します。

  • len(変数)で、データの件数が算出されます
  • // で余りを繰り上げした商を求めることができます

４、HTMLでページネーションを実装

<!--(1)前のページ-->
{% if (CurPage - 1) > 0 %}
 <a href="./?page={{ CurPage - 1}}" class="btn btn-outline-secondary">{{ CurPage - 1}}</a>
{% endif %}

<!--(1)現在のページ-->
 <a href="#" class="btn btn-secondary">{{ CurPage }}</a>

<!--(2)次のページ-->
{% if (CurPage + 1) <= MaxPage %}
 <a href="./?page={{ CurPage + 1}}" class="btn btn-outline-secondary">{{ CurPage + 1}}</a>
{% endif %}

コードの補足説明

HTML内で Jinja を使用し、条件によって動的にボタンを表示させていきます。

(1) 前のページ

表示させているページ番号の前のページが１より小さい場合は、このリンクは表示させないという条件

CurPage – 1　：　( 現在のページ番号 – １ ) ＝ 前のページ番号

(2) 現在のページ

現在表示させているページのリンクになります。
※ どんな場合でも、このリンクは表示されます。

CurPage ： 現在のページ番号

(3) 次のページ

表示させているページ番号の次のページが最大ページ数より大きい場合は、このリンクは表示させないという条件

CurPage + 1　：　( 現在のページ番号 + １ ) ＝ 次のページ番号

MaxPage　：　最大ページ番号

５、Bootstrap(CSS)をHTMLに読み込ませる

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
Bootstrap 公式

以上になります。

ここでは、シンプルに実装方法のみを紹介させていただきました。

条件を追加し、ボタンの数を増やしたり
見た目などを好きなものに変えなど、自由にカスタマイズをしてみてください。

ここまで、みていただき、本当にありがとございました。

これからもよろしくお願いします。では。🙂

Pythonをまとめて学びたい方は、まずは無料オンラインセミナーがおすすめ

ＰＹＴＨＯＮ