別のデータテーブルとDjangoの選択を使用してjqueryデータテーブルにデータをロード

Question

Djangoアプリケーションのページにいくつかのテーブルがあり、データを表示、検索、ソートするためにDatatablesを使用しています。

1つのデータテーブルの行、customersテーブルがユーザーによって選択されている場合、この行のIDをAJAXを使用してviews.pyファイルのビューに送信します。私が今起きたいのは、2番目のテーブルである訪問テーブルが、この顧客の関連する訪問に更新されているということです。データが正しく送信され、Djangoコンソールにvisitsオブジェクトを出力できるので、作成するDjangoクエリが正しいことがわかります。しかし、私は今データをどうするかと苦労しています。

通常、このデータをコンテキストとして使用してテンプレートをレンダリングしますが、実際はこれが私が顧客テーブルを生成した方法です。しかし、私はそれをクライアント側に送り返し、Datatableにレンダリングさせる必要があると思いますか？両方のテーブルが同じページにあるので、更新された訪問テーブルをレンダリングするだけです。ここで

は私のJavascriptのスニペットが

var cust_table = $('#all_customers').DataTable({"lengthMenu": [3], 
               "bLengthChange": false, 
               "paging": true, 
               select: 'single'}); 
$('#all_visits').DataTable({"lengthMenu": [3], 
          "bLengthChange": false}) 

cust_table.on('select', function (e, dt, type, indexes) { 
     var rowData = pt_table.rows(indexes).data().toArray()[0][0]; 
     var URL = 'select_customer/'; 
     var id = { 'id': rowData }; 
     $.get(URL, id, function (response) { 
      if (response === 'success') {alert("success");} 
      else {alert("error"); 
      } 
    }); 

を提出し、私は私が訪問はDjangoのコンソール上でオブジェクトをプリントアウトすることができ、言ったようにこれは要求

def select_customer(request): 

""" 
Use the customer id selected by the user to fill the visits table. 
""" 
try: 
    if request.method == "GET": 
     print "request has come through" 
     if "id" in request.GET: 
      visits = (CustomerId.objects.get(id=request.GET["id"]) 
         .customer.visit_set.all() 
      context = {"visits": visits} 
      render(request, 'flair_app/patients/visit_table.html', context) 
except: 
    return HttpResponse('fail') 

を処理図であります私は彼らがそこにいることを知っている。しかし、単にテーブルを含むvisit_tableテンプレートをレンダリングしようとしても、ページは変更されません。

これは簡単な質問ですが、私はWeb開発にはとても新しいのでとても謝ります。ページにデータを表示するにはどうすればよいですか？

Answer 1

サーバーからHTML文字列を戻しています。しかし、クライアントでは、あなたはresponse変数でしか受け取ることができませんが、あなたはそれを使って何もしません。

レンダリングする場合は、ページのHTMLに挿入する必要があります。

flair_app/patients/visit_table.htmlが#all_visitsテーブルのHTMLのみであると仮定すると、あなたは、単にサーバから返されたHTMLとその要素で現在のHTMLを置き換えることができます。その後、この

$.get(URL, id) 
.done(function(responseData) { 
    $('#all_visits').html(responseData); 
}) 
.fail(function(error){ 
    // handle error 
}); 

のようなものは、おそらくあなたの助けにDataTableオブジェクト再び

$('#all_visits').DataTable({"lengthMenu": [3], "bLengthChange": false})