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