使用另一个数据表和 Django 的选择将数据加载到 jquery 数据表

Question

我在 Django 应用程序的页面上有几个表，我正在使用 Datatables 来查看、搜索和排序数据。

如果用户选择了一个数据表（customers 表）的一行，我使用 AJAX 将此行的 ID 发送到我的 views.py 文件中的视图。我现在想要发生的是第二个表，即访问表，使用该客户的相关访问进行更新。我知道数据发送正确，并且我创建的 Django 查询是正确的，因为我可以将访问对象打印到 Django 控制台。但我现在正在为如何处理数据而苦苦挣扎。

通常我会使用此数据作为上下文来呈现模板，实际上这就是我生成客户表的方式。但我认为我需要将其发送回客户端并让 Datatable 进行渲染？两个表都在同一个页面上，所以我只想渲染更新后的访问表。

这是我的 Javascript 文件的 sn-p

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");
          }
    });

这是处理请求的视图

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')

正如我所说，我可以在 Django 控制台上打印出访问对象，以便我知道它们在那里。但是尝试渲染仅包含表格的 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})