概要

Djangoでアプリを制作しています。
カスタムフィルタを使用して、DBのデータをフィルタリングしております。
カスタムフィルタをテンプレートファイルに貼り付けると、問題なくフィルタリングされるのですが、
今回ボタンをクリックしてfilter.jsを読み込んで動的に見せたいと考えております。
外部にjsファイルを置き、ボタンを押すと、動的に記述データが出てくるようになりましたが、
カスタムフィルタによってコードが変換されず、コードがそのまま出てきてしまいます。
jsファイル内でカスタムフィルタを使用することはできないのでしょうか？
もしできない場合、動的にカスタムフィルタを表示させる方法があればご教授いただけないでしょうか？

表示されている画面

コード

filter.js

function OnButtonClick() {
  document.getElementById("filter_place").innerText = "{{ value | A:customer_value.lesson.all }}";
}

monthly_invoice_list.html

<body>
  <h1>
    {{menu}}
  </h1>
  請求月
  <br>
  <input type = "button" value= {{ month }} onclick = "OnButtonClick()">

  <br clear = "left">
  <table border = "1", align = "left">
    <tr>
      <th>顧客ID</th>
      <th>顧客名</th>
      <th>ジャンル</th>
      <th>合計レッスン数</th>
      <th>請求金額</th>
    </tr>
  {% for customer_value in customer_data %}
    <tr>
      <td>{{ customer_value.id }}</td>
      <td>{{ customer_value.name }}</td>
      <div id = "filter_place">
以下省略

filter.py

from django import template
register = template.Library()
from datetime import datetime
from django.db.models import Sum

today = datetime.now()
this_month_first_day = today.replace(day=1).strftime("%Y-%m-%d")
today_month = today.strftime("%Y-%m-%d")

def A(value, lesson_object):
  this_month_lesson_object = lesson_object.filter(lesson_date__range=(this_month_first_day, today_month))
  lesson_gerne_list = list(this_month_lesson_object.order_by('gerne').reverse().values('gerne').values_list('gerne', flat=True).distinct())
  delimit_lesson_gerne_list = '/'.join(lesson_gerne_list)
  return delimit_lesson_gerne_list
register.filter('A', A)

バージョン情報

Python 3.6.6
Django 2.0.7

行動規範の内容に同意します

回答3件

filterは、テンプレートを元にサーバーサイドでHTMLをレンダリングするときに使われるものなので、
フロントエンド（javascript）では、機能しないと思います。

フロント側での選択を元に、再度サーバーへページの要求をする必要があると思います。

もしくは、全く別の仕組み（Djangoのテンプレートを利用せず、フロント側で画面構築する）が必要かも。

投稿2018/08/21 04:48

Meganezaru

総合スコア715

退会済みユーザー

2018/08/21 04:55

早々にありがとうございました。画面遷移で対応します。

行動規範の内容に同意します

ベストアンサー

まず、基本として
pythonで作成されたHTMLを表示　⇒　HTMLがロードされた後にjavascriptでいじる
ということは可能ですが、javascriptはあくまでロード後に画面で動作する物なのでjavascriptでさらにpythonを記述するということはできません。
コードは書けても動かすことができないのです。
ページを遷移させるか、データを全て取得しておいて、カスタムフィルタの部分は全てjavascriptで制御するかの2択になるかと思います。

投稿2018/08/21 04:43