DataTablesとDjango（model）の連携

pythondjango

前回（Djangoを使ってみる⑤(DBの中身を表示)）DBの中身を表示してみたが、あのままでは少し味気ないので他の方法を試してみます。

DataTablesについて

今回はDataTablesというものを使ってみます。
DataTables：datatables

・ページング機能
・ソート機能
・検索機能
などが搭載されたテーブルを手軽に使うことが出来ます。

データ量が多い場合はServer-side processingを使うと良いでしょう。
今回データ量は少ないですがServer-side processingを使ってやってみます。

django-datatables-viewのインストール

DjangoでServer Side Processingする場合は、 django-datatables-viewを使います。
下記コマンドでインストールしておきます。


pip install django-datatables-view

HTMLテンプレートの作成

必要な処理は以下の通りです。
①DataTablesを使うのに必要なファイルの読み込み


<link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/>
    <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>

②テーブルの作成


<table id="book" class="table table-bordered">
  <thead>
    <tr>
      <th>本の名前</th>
      <th>作者</th>
      <th>出版社</th>
      <th>価格</th>
    </tr>
  </thead>
</table>

③作成したテーブルにDataTablesを適用


<script>
  $('#book').DataTable({
  オプションを記載
  });
</script>

オプションは公式に詳しく載っているので必要なものを記載しておきます。
オプション：option

今回はServer-side processing(ajax)を使用するので下記のように設定します。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>書籍一覧</title>
    <link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/>
    <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>
  </head>
  <body>
    <table id="book" class="table table-bordered">
      <thead>
        <tr>
          <th>本の名前</th>
          <th>作者</th>
          <th>出版社</th>
          <th>価格</th>
        </tr>
      </thead>
    </table>
    <script>
      $('#book').DataTable({
        deferRender: true,
        serverSide: true,
        processing: true,
        orderCellsTop: true,
        responsive: true,
        ajax: {
          "url": "/data/",
          "type": "GET",
        },
        columnDefs: [
          {targets: 0, data: 'book_name'},
          {targets: 1,  data: 'author' },
          {targets: 2,  data: 'publisher' },
          {targets: 3,  data: 'price' },
        ]
      });
    </script>
  </body>
</html>

views.pyの編集

先ほど設定したテーブルにmodelのデータを渡すための処理を追加します。
これまでと違い「class」にしなければいけないので注意が必要です。


from django_datatables_view.base_datatable_view import BaseDatatableView

class DataTableView(BaseDatatableView):
    # モデルの指定
    model = book_list
    # 表示するフィールドの指定
    columns = ['book_name', 'author', 'publisher', 'price']

    # 検索方法の指定：部分一致
    def get_filter_method(self):
        return super().FILTER_ICONTAINS

ソース全体はこちらを参照：
views.py

urls.pyの編集

htmlファイルを読み込むための処理と先ほどのviews.pyに記載した処理を紐づけるための処理を記載します。


from django.urls import path
from django.views.generic import TemplateView
from .views import DataTableView #追加部分
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('book_list/', views.view_book_list, name='book_list'),
    path('book_list_datatables', TemplateView.as_view(template_name='test_app/book_list_datatables.html'), name='book_list_datatables'), #追加部分
    path('data/', DataTableView.as_view()), #追加部分
]

※「path('data/', DataTableView.as_view()),」
の「'data/'」の部分はhtmlファイルに記載した「ajax」のurlの部分と一致させる必要があります


ajax: {
          "url": "/data/",
          "type": "GET",
        },

動作確認

「python manage.py runserver 127.0.0.1:8000」でサーバを起動させ、
[http://127.0.0.1:8000/book_list_datatables]
にアクセスをし、下記のように表示されていればＯＫです。
20210530114822

環境一式はこちら：
https://github.com/hachi0088/django