CODEWITHSUNDEEP
jquerypythondjangodatatable
Beginner
Beginner

Reputation: 2886

Django Datatables from model

I have a simple model in my django app that I am displaying as a table. I would like to change the table to a datatable. However even after following all the steps listed ont eh datatables.net website I cant seem to convert my table into a datatable:

models.py

from __future__ import unicode_literals

from django.db import models


    class Profile(models.Model):
        name = models.CharField(max_length=128)
        email = models.EmailField(null=False)
        city = models.CharField(null=False, max_length=128)

        def __unicode__(self):
            return self.name

views.py

from django.shortcuts import render
from django.http import HttpResponse
from vc4u.models import Profile
# Create your views here.

def index(request):
    user_list = Profile.objects.order_by('name')
    context_dict = {'user_list': user_list}

    return render(request, 'index.html', context_dict)

index.html

<div class="container">
   {% if user_list %}
   <table class="table table-bordered table-striped" id="users">
     <tr>
       <th>Name</th>
       <th>Email</th>
       <th>City</th>
     </tr>
     {% for users in user_list %}
     <tr>
       <td>{{ users.name }}</td>
       <td>{{ users.email }}</td>
       <td>{{ users.city }}</td>
     </tr>
     {% endfor %}
   </table>
   {% else %}
     <strong>There are no users.</strong>
   {% endif %}
 </div>

I ve posted the CSS CDN on top of the page and the jquery and datatable js CDN on the bottom of the page with this script:

$(document).ready(function(){
    $('#users').DataTable();
});

This doesn't seem to work and I had a look at the console in developer tools and no errors are listed.

Upvotes: 0

Views: 1038

Answers (3)

Ray Ardinanda
Ray Ardinanda

Reputation: 11

In addition to thr table thead and tbody comment, Jquery datatables will automatically sort your table by the 1st column if you are using the default datatables constructor.

Upvotes: 0

rafalmp
rafalmp

Reputation: 4068

From the datatables manual:

For DataTables to be able to enhance an HTML table, the table must be valid, well formatted HTML, with a header (thead) and a body (tbody). An optional footer (tfoot) can also be used.

so your table is missing the required thead and tbody tags.

Upvotes: 1

denvaar
denvaar

Reputation: 2214

Unless your table has an id of myTable, then it's not going to work. It looks like you should change your jquery selector to be $('#users') because that's the table id that you have set in the code posted above.

Upvotes: 0

Related Questions