Django: Using DataTables - django

Question

I want to introduce filtering and sorting functionality to my table using ajax. From what I found, DataTables seamed to be the best option. but, I can't seem to get it working! The first thing I tried was using it just how they have it set up with there demos. But I could not seam to get the search form to generate and the sorting wont work either. I then tried to use one of the many packages created to implement that functionality. However, I found that the documentation was usually not very clear and difficult to follow, or even when I did follow it, I would be left with the table rendering fine, but the search and sort would still not be available. So I've decided to go back to my original and see if someone might know what I'm doing wrong. The page does render the table correctly, and if I view page source, the javascript is properly 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>{{ liquor.BrandName }}</td>
<td>{{ liquor.VendorName }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>None to show!</p>
{% endif %}
{% endblock %}
</code>
</pre>
Here is also my view. Perhaps I've done something wrong here.
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 on a project I worked on a while back. Here's 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);
Key is this line in the table options which defines the source URL for the AJAX request from the DataTable:
"sAjaxSource": "{% url get_tickets_list %}",
Then, you'll also need a view to return the 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, this was a while ago and may not work anymore with the latest versions of DataTable, but maybe it will set you in the right direction.