Django開発~ブログ構築編6~django-tables2

django

学習記録

Django開発~ブログ構築編5~カスタムユーザーの続きです。

django-tables2を使って、ブログにページネーション機能、テーブルソート機能を実装したいと思います。

django-tables2とは

django-tables2は、テーブル一覧を自動で生成してくれるサードパーティ製のモジュールです。

主に以下の機能があります。

・ページネーション機能の搭載
・テーブルソート機能の搭載

モジュールの追加

requirements.txtにモジュールを追加してみましょう。

モジュールを適用するには、dockerコンテナをビルドする必要があります。

ビルド成功後、settings.pyにdjango-tablesを追加してください。

tables.pyを作成

blogアプリケーション配下にtables.pyファイルを作成しましょう。

このファイルに、画面に出力するテーブルの設定を行います。

このPostTableクラスにPostデータを渡すと画面に表示するテーブル一覧の元になります。

views.pyの変更

続いて、Viewのpost_listに変更を加えます。

filterメソッドを使うとデータ取得の条件を指定できます。ここでは、ログインユーザーのデータのみ取得し、postsに格納しました。ログインユーザーの情報は、requestプロパティの「user」に入っています。

postsをPostTableに渡してtable(テーブルオブジェクト)を作成し、tableデータを画面に返します。

base.htmlの変更

font awesome を導入しましょう。

font awesomeは、Webアイコンを提供してくれます。この機能を使うためには、CDNで読み込む必要があるので、base.htmlに変更を加えましょう。

post_table.htmlの作成

tables.pyを作成した時、template_nameに「post_table.html」を指定したので、このファイルを作成しましょう。このテンプレートにtable(テーブルオブジェクト)を渡します。

django-tables2のテンプレートの一つである「bootstrap4.html」を元にテンプレートを作成します。更に、「updateボタン」、「deleteボタン」、「詳細画面へのリンク」を追加しましょう。

list.htmlの変更

最後にlist.htmlを変更しましょう。django_tables2をインクルードします。

動作確認

ここまでお疲れ様でした。動作確認して見ましょう。

「localhost:8000」にアクセスしてください。

綺麗なテーブルが出力されていますね。Titleの「about」をクリックしてみます。

肝心なページネーションが確認できませんね。投稿数を増やしてみましょう。投稿数が4つ以上になるとページネーション状態になります。

ページの下の方に「next」が表示されましたね。押してみましょう。

2ページ目に画面遷移できましたね。今度は、1ページ目に戻り、「ID」リンクを押下してください。

「昇順」でソートできましたね。もう一度押下すると昇順になります。

動作は問題なさそうですね。今回は以上になります。

次回

次回は、検索フォームをブログに実装します。お楽しみに^^

コメントを残す