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って記事少ないですよねー。そんなに困らないですが困ります（笑）