flask学習中
最終目標
一覧画面のリストにページネーションを付ける
まずは設定
python3
pip3 install Flask-Paginate
cafe.py
from flask_paginate import Pagination, get_page_parameter
早速書いていきます
パスを準備しておきます
cafe.py
@app.route('/cafe/list')
def list():
メソッド内です
cafe.py
@app.route('/setting/cafe/menu/list')
def list():
------------ここから追記-------------
# 一覧のレコードを取得
menus = Menu.query.all()
# ページネーション
## 現在のページ番号を取得
page = int(request.args.get(get_page_parameter(), 1))
## ページごとの表示件数
per_page = 10
## ページネーションオブジェクトを作成
pagination = Pagination(page=page, per_page=per_page, total=len(menus))
# 表示するデータを取得
start = (page - 1) * per_page
end = start + per_page
displayed_menu = menus[start:end]
# テンプレートを表示
return render_template('/cafe/list.html', menus=displayed_menu, pagination=pagination)
html
どこでもページネーションを表示したい場所にしたのコードを設置します
.html
{{ pagination.links }}
css
見た目がちょっとダサいので好みの形に変えてあげましょう
フォーム
.content nav {
background-color: #fff;
padding: 10px;
z-index: 9999;
}
.page-item.active .page-link {
color: #212529;
border-color: #f2f2f2;
background-color: #f2f2f2;
}
.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 li a:hover {
background-color: #f5f5f5;
その他
余談ですが、flaskって記事少ないですよねー。そんなに困らないですが困ります(笑)