django_tables2でテーブルのデータをそのまま表形式に可視化

はじめに

テーブルに格納されているデータを表形式で可視化したい時に、

django_tables2を用いてそのまま表示する方法を紹介します。

from django.db import models

class Item(models.Model):
    date = models.DateField(verbose_name='date',)
    col1 = models.FloatField(verbose_name='col1',)
    col2 = models.FloatField(verbose_name='col2',)
    col3 = models.FloatField(verbose_name='col3',)
    col4 = models.FloatField(verbose_name='col4',)

5, 表示する列columnを選ぶ (tables.py)

tables.pyで、表示する列columnを列挙します。

import django_tables2 as tables
from .models import Item  # 目次4で定義したモデル

class ItemTable(tables.Table):
    class Meta:
        template_name = 'django_tables2/bootstrap4.html'  # 後ほどbootstrap4で可視化
        fields = ('date','col1','col2','col3','col4',)    # 表示する列column

6, モデルデータの受け渡し (views.py)

views.pyで、モデルのデータをhtml画面に投げます。

from django_tables2 import SingleTableView
from .models import Item       # 目次4で定義したモデル
from .tables import ItemTable  # 目次5で選んだ列column

class DetailView(SingleTableView):
    table_class = ItemTable
    template_name = 'app/detail.html'  # テーブル表示するhtml画面

    def get_queryset(self):
        # 1, 全レコードを可視化するならall()
        return Item.objects.all()
        
        # 2, 例えばpk(数値型)を用いて特定の数レコードを可視化するならfilter()
        # pk = self.kwargs.get('pk')
        # return Item.objects.filter(id__lte=pk).filter(id__gte=pk-5)

7, URL遷移の設定 (urls.py)

urls.pyでテーブル画面に飛べるように設定します。

from django.urls import path
from .views import DetailView  # 目次6で作成したビュー

urlpatterns = [
    # 1, 全レコードを可視化するならpkの設定は不要
    path('detail/', DetailView.as_view(), name='detail'),
    
    # 2, 特定の数レコードを可視化するならpk要設定
    # path('detail/<int:pk>/', DetailView.as_view(), name='detail'),
]

8, 画面にデータを表形式で可視化 (detail.html)

detail.htmlで、選択した列columnをテーブル表示します。

{% load render_table from django_tables2 %}
<!doctype html>
<html>
    <head>
        <title>django_tables2_chart_visualize</title>
        <!-- bootstrap4で可視化 -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous">
    </head>
    <body>
        <!-- ウィンドウサイズに合わせて枠の大きさを変える -->
        <div class="container-fluid">
            <!-- 水平方向の横スクロールバーを加える -->
            <div class="table-responsive col-auto">
                <!-- 縞ストライプで見やすくする -->
                <table class="table table-striped">
                    {% render_table table %}
                </table>
            </div>
        </div>
    </body>
</html>

9, 可視化アプリの追記 (settings.py)

settings.pyに、テーブル表示用に書き加える1文があります。

INSTALLED_APPS = [
    'django_tables2',
]

※ 'django_tables2', を書き加えてください。

おわりに

django_tables2でデータを表形式で可視化する方法を紹介しました。

テーブルのデータをそのまま表示したい時に役立てて頂ければ幸いです。

Cream-Kuchenのブログ

django_tables2でテーブルのデータをそのまま表形式に可視化

はじめに

目次

1, 目標: データを表形式で可視化する(例)

2, django_tables2公式docs

3, フォルダ構成

4, モデルのデータ定義 (models.py)