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

Question

I have a few tables on a page in a Django application and I am using Datatables to view, search and sort the data.

If a row of one datatable, the customers table, is selected by the user I send the ID of this row using AJAX to a view in my views.py file. What I want to happen now is that a second table, the visits table, is updated with the relevant visits for this customer. I know that the data is sent correctly and the Django query I create is correct as I can print out the visits object to the Django console. But I am struggling with what to do with the data now.

Usually I would render a template using this data as a context, and in fact this is how I generated the customer table. But I think I need to send it back to the client side and let the Datatable do the rendering? Both tables are on the same page so I want to just render the updated visits table.

Here is a snippet of my Javascript file

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

and this is the view that processes the request

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

As I said, I can print out the visits object on the Django console so I know they are there. But trying to render the visit_table template, which just contains the table doesn't change the page.

I am quite new to web development so apologies if this is an easy question; but how do I display the data on the page?

Answer 1

You are getting back an HTML string from the server. But on the client, you only receive it in your response variable, but then you don't do anythong with it.

You need to inject it into the HTML of the page if you want to to render.

Assuming that flair_app/patients/visit_table.html is only the HTML for the #all_visits table, you could simply replace the current HTML in that element with the HTML that was returned by the server. Something like this

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

After that, you will probably need to rebind you DataTable objects again

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