【Django】ListViewの検索画面にページを分けたリスト表示(ページネーション)の実装をしていく

▼この記事をSNSでシェアする▼

スポンサーリンク

スポンサーリンク

前回の記事で検索画面の実装をしました。

Djangoで検索機能を作りたい。ListViewにカスタムフィルタを実装する方法と注意点

今回はその続きです。

検索画面が要素数によらず1ページに全て表示されている状態なので5件ごとにページを分けて表示していきたいとおもいます。

ここではこれをページネーションと呼びます。

1. 利用している環境

おさらいしておきましょう。

Mac OS High Sierra10.13.6に下記のものを利用しています。

  • Atom(テキストエディタ+ターミナル付き)
  • Homebrew(パッケージマネージャ)
  • Python3(version 3.7.0)と主要なライブラリ(numpy,matplotlib,scipy,pandas)
  • Bootstrap 4.1.1を適用しています。
  • 作成中のjinromuraアプリにはtemplateのindex.html(ListView)とdetail.html(detail.view)を汎用ビューで作成しています。

2. ページネーションの実装方法

2.1 ページネーションの実装の進め方

  1. templatetags/pagination.py:アプリのフォルダのtemplatetagsフォルダを作り、ページごとのクエリを返すカスタムフィルタを作る
  2. views.py:1ページごとの表示件数(paginate_by)の設定
  3. index.html:ページネーションのコンポネントに関する記述を書く

2.2 アプリで実現したい細かい仕様

  • 「前へ」「次へ」は必要に応じて表示する
  • すべてのページへのリンクを表示する
  • 5件以上ならページネーションが表示される
  • 4件以下ならページネーションは表示されない
  • 人狼村のindex.html(Listview)の検索画面でページを移動しても、検索クエリ(request.GET)が保持される

検索機能がなく一覧に表示されるものが同じであればドキュメントのページネーションに関する記述にそって実装できるかと思います。

参考:ページネーション(Document)

ただ、フィルタリングをしているListViewに適用する際、ページを移動すると検索条件が保持できません。

3. ページネーション機能の実装手順

3.1 templatetags/pagination.py

10行目:Django2.1以降、strが指定しないとint型でpage_numberが取得される模様。

request.GETはquerydictに都度代入されないのでコピーし、ページ番号を取得し、それをもとに各ページのURL(?以下)を返しています。

参考:リクエストとレスポンスのオブジェクト

→querydictなどのメソッドについて書かれているDocument

3.2 views.py

変更箇所は12行目のみで、汎用ビューにあるpaginate_byに値をセットすることで一覧画面の件数を追加設定しています。

参考:ページネーション(Document)

→paginatorのメソッドについて書かれています。

3.3 index.html

7行目:pagination.pyのロード

13行目:ページネーションの有無(検索結果が5件以上あるかないか)の分岐

17行目:「前へ」があるかないかの分岐

→has_previous()メソッド

20行目:リンクページの繰り返し表示

21行目:現在いるページか否かの分岐

→link_page(ページ番号)とpage_obj(現在のページ)が一緒ならspanタグを設定して押せないようにする。それ以外の番号にはaタグをセットする

29行目:「次へ」があるかないかの分岐

→has_previous()メソッド

paginationのulタグのaタグではpagination.pyのフィルタに従って引数を指定して、「http://~/?people=~&page=~」というURLをhref属性に指定します。

htmlに書かれているpageオブジェクトメソッドの詳しい仕様については下記を参考にしてください。

参考:ページネーション(Document)

→paginatorのメソッドについて書かれています。

CSSの設定に関する補足
このプロジェクトにはBootstrap4のbootstrap.cssを適用していて、それにあわせクラス設定に合わせています。
Bootstrap4のページネーションに関する記述はここを参考にしてください。

ページ送り(Bootstrap4移行ガイド)

4. 画面表示

絞り込みで検索して、ページを遷移してもクエリを保持してページを表示できます!

 

現在のページは青く表示され選択できません。

次の項目がない場合は「次へ」、前の項目がない場合は「前へ」が非表示になっています。

5. ソースコード

デザイン未整形のアプリですが、ソースコードをgithubにて公開しています

詳細が気になる方はご参照ください。

今回の記事(2018/09/24)作成時のソースコード(jinromura)

そろそろCSS整えようかなー・・・

それとも検索ロジック増やすのが先か・・・

スポンサーリンク

▼この記事をSNSでシェアする▼

フォローする

メニュー・主な記事カテゴリ

おすすめ特集!




「ゆとり鳥日記」について
ITを中心に関心の赴くままに好きなように書いていく雑記ブログ!管理人が二人います。
◆フクロウ(19卒就活生)
◆トンビ(社会人1年目SE)

詳しいプロフィール
お仕事の依頼・ご要望

ゆとり鳥日記をBTCで応援する