Django: using DataTables

Question

I want to introduce a filter and sort function into a table using ajax. From what I found, DataTables seamed is the best option. but i can't get it to work! The first thing I tried was to use it, as they created its demo version. But I could not seam to get the search form for generation, and sorting would not work either. Then I tried to use one of the many packages created to implement this functionality. However, I found that the documentation was generally not very clear and difficult to observe, or even when I was doing it, I would be left with an excellent view of the table, but searching and sorting would still not be available. So I decided to go back to my original and see if anyone can find out what I'm doing wrong. The page renders the table correctly, and if I look at the source of the page, javascript is correctly linked.

Here is the html:

<pre> <code> {% extends "theme_bootstrap/base.html" %} {% load staticfiles %} {% block extra_style %} <script src="{% static "js/jquery.js" %}"></script> <script src="{% static "js/jquery.dataTables.js" %}"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $('#test').dataTable(); }); </script> {% endblock %} {% block body %} {{ store.StoreName}} {% if liquors.count > 0 %} <h1>liquors</h1> <table id="test"> <thead> <tr> <th>Liquor Code</th> <th>Brand Name</th> <th>Vendor Name</th> </tr> </thead> <tbody> {% for liquor in liquors %} <tr> <td>{{ liquor.LiquorCode }}</td> <td><a href="/liquors/get/{{ a.StoreID }}/{{ liquor.id }}/">{{ liquor.BrandName }}</a></td> <td>{{ liquor.VendorName }}</td> </tr> {% endfor %} </tbody> </table> {% else %} <p>None to show!</p> {% endif %} {% endblock %} </code> </pre> 

Here is also my opinion. Maybe I did something wrong.

 def liquors(request, store_id): args = {} args.update(csrf(request)) a = Store.objects.get(StoreID=store_id) args['liquors'] = Liquor.objects.all() args['a'] = a return render(request, 'liquors.html', args) 

Answer 1

I did this in a project that I worked on a while ago. This is how I defined the table in my template:

 $(document).ready( function () { var ticketTable = $('#ticket-table').dataTable( { "fnDrawCallback": function() { // Initialize popovers anytime new data is loaded into the table $('a[rel=tooltip]').tooltip({ placement: 'left' }); }, "bServerSide": true, "bAutoWidth": false, "sPaginationType": "bootstrap", "sAjaxSource": "{% url get_tickets_list %}", "aaSorting": [[ 2, "desc" ]], "iPageLength": 25, "bLengthChange": false, "bStateSave": true, "bFilter": true, "sDom": "<'length-change'><'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'length-change'><'span6'p>>", "oLanguage": { "sSearch": "" }, "aoColumns": [ { "bSortable": false, "sWidth": "14px", "bSearchable": false }, { "sWidth": "160px", "bSearchable": true }, { "sWidth": "60px", "bSearchable": true }, { "bSearchable": true }, { "bSortable": false, "sWidth": "14px", "bSearchable": false }, { "sWidth": "50px", "sClass": "center", "bSearchable": false }, { "bSearchable": true }, { "sWidth": "70px", "sClass": "center", "bSearchable": false }, { "sWidth": "75px", "bSearchable": true } ] } ).fnSetFilteringDelay(500); 

The key is the line in the table parameters that defines the source URL for the AJAX request from the DataTable:

 "sAjaxSource": "{% url get_tickets_list %}", 

Then you also need a view to return AJAX requests:

 def get_tickets_list(request, queryset=Ticket.objects.all()): """ AJAX calls for DataTable ticket list. """ #columnIndexNameMap is required for correct sorting behavior columnIndexNameMap = { 0: 'link', 1 : 'created', 2: 'priority', 3: 'client', 4: 'client_email', 5: 'sites', 6: 'problem',7: 'updates', 8: 'state' } #path to template used to generate json (optional) jsonTemplatePath = 'json_tickets.txt' #call to generic function from utils return get_datatables_records(request, queryset, columnIndexNameMap, jsonTemplatePath) 

As I said, it was a long time ago and may no longer work with the latest versions of DataTable, but it may set you in the right direction.