技術

【Django】一覧画面を効率的に実装する django-tables2 の紹介

レザボア・コンサルティングの中西です。

Django は優れた Web フレームワークですが、大量のデータを表形式で表示する際には、ビューとテンプレートで多くのコーディングが必要になります。

そこで今回は、django-tables2 という強力なライブラリを使って、一覧ページの実装を効率化する方法を紹介します。

前提条件

  • Python 3.6 以降がインストールされていること
  • pip がインストールされていること

※本記事では上記のインストール手順は解説に含めません。

  • 入門記事の内容を実施していること
    • 本記事には、入門記事で作成した sample 以下のソースに手を加えます。

事前準備

まず、新しいアプリケーションを作成します。

python manage.py startapp table_demo

今回は、この table_demo アプリケーションで動作確認を行います。
settings.py の INSTALLED_APPS に table_demo を追加します。

INSTALLED_APPS = [
    ...
    'table_demo',
]

django-tables2 の導入

次に django-tables2 をインストールします。

pip install django-tables2

インストール後、 settings.py の INSTALLED_APPS に django_tables2 を追加します。

INSTALLED_APPS = [
    ...
    'django_tables2',
]

モデルの準備

一覧表示するデータ用のモデルを作成します。
今回は簡単な例として、Person モデルを作成します。

# table_demo/models.py
from django.db import models

class Person(models.Model):
    name = models.CharField(max_length=100)
    age = models.IntegerField()
    city = models.CharField(max_length=100)

Tableクラスの定義

django_tables2 を画面で表示するには Table クラスを作成し、表示するモデルやフィールドを指定します。

# table_demo/tables.py
import django_tables2 as tables
from .models import Person

class PersonTable(tables.Table):
    class Meta:
        model = Person
        template_name = "django_tables2/bootstrap4.html"
        fields = ("name", "age", "city")

ビューの実装

一覧画面を表示するビューを作成します。

# table_demo/views.py 
from django_tables2 import SingleTableView
from .models import Person
from .tables import PersonTable

class PersonListView(SingleTableView):
    model = Person
    table_class = PersonTable
    template_name = 'table_demo/person_list.html'

URLとテンプレートの作成

urls.py にPersonListView へのURLパターンを追加します。

# table_demo/urls.py
from django.urls import path
from .views import PersonListView

urlpatterns = [
    path('persons/', PersonListView.as_view(), name='person_list'),
]
# sample/urls.py
from django.urls import path, include

urlpatterns = [
    ...
    path('table_demo/', include('table_demo.urls')),
]

また、表示用のテンプレートを作成します。
Bootstrap でデザインを整えます。

<!-- table_demo/templates/table_demo/person_list.html -->
{% load render_table from django_tables2 %}

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  </head>
  <body>
    <h1>Person List</h1>
    {% render_table table %} 
  </body>
</html>

動作確認①

モデルのマイグレーションを実施しておきます。

python manage.py makemigrations
python manage.py migrate

python manage.py runserver コマンドでDjangoの開発サーバーを起動し、http://127.0.0.1:8000/table_demo/persons/ にアクセスすると一覧画面が表示されると思います。

django-table2-tutorial-01

テーブルが簡単に表示できましたね。

データ準備

せっかくなので、データを投入してみましょう。

# table_demo/admin.py
from django.contrib import admin
from .models import Person

admin.site.register(Person)

このコードで、管理画面にモデルが反映され、データを直接登録・編集・削除できるようになります。

管理画面にログインするためのスーパーユーザを登録します。

python manage.py createsuperuser

任意のユーザ名・パスワードで登録してください。
登録後は、 http://127.0.0.1:8000/admin/ で管理画面にアクセスできます。

表示名などを整えていないので見栄えは悪いですが、11件のデータを用意してみました。

django-table2-tutorial-02

動作確認②

再度、http://127.0.0.1:8000/table_demo/persons/ にアクセスします。

django-table2-tutorial-03

ちゃんとデータが表示されていますね。

おまけ

ここまでで基本的な紹介をしましたが、django-tables2 には詳細な設定項目がたくさんあり、さまざまなカスタマイズが可能です。

例えば、ページネーションも簡単に実装できます。

tables.py に以下のコードを加えます。

# table_demo/tables.py
import django_tables2 as tables
from .models import Person

class PersonTable(tables.Table):
    class Meta:
        model = Person
        template_name = "django_tables2/bootstrap4.html"
        fields = ("name", "age", "city")
        per_page = 5 # 1ページに表示する件数を指定

たったこれだけです。

django-table2-tutorial-04

頑張って自分で実装するのもいいですが、効率化可能なところはライブラリの力を借りたいものです。

参考

https://github.com/jieter/django-tables2

おわりに

以上で django-tables2 を使ったシンプルな一覧画面の作成があっという間に完了しました。
Django 開発の効率化のためにぜひ活用してみてください。

システムのお困りごと、何でもご相談ください。


Reservoir Consulting は、お客様ごとに最適なソリューションをご提案いたします。
また、弊社では要件を確認する段階から実際に動作する画面（プロトタイプ）を用い、お客様との認識齟齬が生じにくいプロジェクト手法で開発を行います。
私たちのプロジェクトアプローチについては、Reservoir Way をご覧ください。

お問合せはこちら

関連記事

TOP