I am having issues with retrieving data from a model in Django using ajax to and display it in a Datatable table

Viewed 286

What I am trying to do is I have a model which already has got about 5000 records. Retrieving it as a context from a view is very slow. So i thought lets use ajax which would do server side processing. So I tried building a view which would handle ajax requests, retrieve all data from the model and return a JsonResponse. Now which I run the server I get the following issue :

  • DataTables warning: table id=hospital_table - Requested unknown parameter 'id' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

I have gone through the link but well I'm am not able to fathom what's wrong. I'm fairly new to django.

This is my Django Model :

class Hospital_Data(models.Model):
   hospital_name = models.TextField(max_length=100)
   hospital_id = models.CharField(max_length=50, unique=True)
   category = models.TextField(max_length=50, null=True)
   city = models.CharField(max_length=100)
   state = models.CharField(max_length=100)
   zone = models.CharField(max_length=100)
   address = models.TextField(max_length=300)
   pincode = models.IntegerField(max_length=10)
   phone_number = models.CharField(null=True,max_length=100)

  def __str__(self):
      return self.hospital_id

This is the view that the ajax communicates with :

def view_hospital_data(request):
   hospitalObjs = Hospital_Data.objects.all()[:10]
   context = {
      "data": list(hospitalObjs.values())
   }
   print(context)
   return JsonResponse(context)

This is the context variable that is printed :

{'data': [
   {'id': 3054, 'hospital_name': 'NAVJEEVAN HOSPITAL', 'hospital_id': 'HOS-MUM-2394', 
        'category': 'GENERAL HOSPITAL', 'city': 'THANE', 'state': 'MAHARASHTRA', 'zone': 'WEST', 
        'address': 'STATION ROAD, ', 'pincode': '401202.0', 'phone_number': '0250-2381454'}, 
   {'id': 3564, 'hospital_name': 'R.G.HOSPITAL', 'hospital_id': 'HOS-COM-1914', 
        'category': 'GENERAL HOSPITAL', 'city': 'COIMBATORE', 'state': 'TAMILNADU', 'zone': 'SOUTH', 
        'address': '# 78B,KOWAI ROAD, UNNUR', 'pincode': '641653.0', 'phone_number': '04254-262727'}, 
 ]}

This is my HTML table

<table class="table my-0" id="hospital_table">
 <thead>
  <tr>
   <th>SL No</th>
   <th>Hospital Name</th>
   <th>Hospital ID</th>
   <th>Category</th>
   <th>City</th>
   <th>State</th>
   <th>Zone</th>
   <th>Address</th>
   <th>Pincode</th>
   <th>Phone Number</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <th>SL No</th>
   <th>Hospital Name</th>
   <th>Hospital ID</th>
   <th>Category</th>
   <th>City</th>
   <th>State</th>
   <th>Zone</th>
   <th>Address</th>
   <th>Pincode</th>
   <th>Phone Number</th>
  </tr>
 </tfoot>
</table>

This is the javascript for the Datatable :

jQuery.noConflict()(function ($) {
$(document).ready(function () {
    alert("tables are being readied")
    $('#hospital_table').DataTable({
        serverSide: true,
        data: "dataSet",
        ajax: {
            url: "view_hospital_data",
            dataSrc: "data",
            type: "GET",
            dataType: 'json'
        },
        deferRender: true,
        columns : [
            {data: 'id'},
            {data: 'hospital_name' },
            {data: 'hospital_id' },
            {data: 'category' },
            {data: 'city' },
            {data: 'state' },
            {data: 'zone' },
            {data: 'address' },
            {data: 'pincode' },
            {data: 'phone_number' },
        ],
    });
});

});

0 Answers
Related