I’ve been building a web app.
For simplicity sake, I have been making use of normal bootstrap tables and Django’s ListView. It works well, with my tests but it creates tables that are plain that lack search and sorting. Although pagination works nicely. There comes a time when you need to get professional and add a bit more functionality to improve the user’s experience.
What Else is out there
It was suggested to me that JQuery Datatables works well and I think it does. There are some packages available for django tables and some that use datatables so I thought I would give them a try and see if they could make my life simpler than implementing jQuery Datatables directly.
Django-Tables2
Set up feels pretty easy. Column ordering is built in, boolean fields are converted into ticks and crosses automagically. It changes emails to mailto: links., relatedLink and Link columns.
So a lot less stuff you need to change.
Using them with a class based view is a bit tedious and they are server side. Not frontend with (Ecma)javascript.
I’ve run into a bit of trouble when adding filtering as a class-based view from django-filters.
It is my opinion to save you time in customising for extra rows for different users and custom formats and display of columns, you should be using django-tables2 on your project.
It works really well with bootstrap and semantic-ui, just make sure to set the options correctly.
Documentation is also really good.
Django-datatable-view
Documentation and github readme lacks a quick start or getting started section. Adding the simple bootstrapping steps should be the base of every readme and helps people get up and running as quick as possible.
There was a bit too much text and features on how the server side implementation is trumping client side implementation of datatables.
Show us the code and how to get going…
I even made a pull request to fix this issue and create a getting started guide for django-datatable-view.
It was a little rough around the edges and difficult to get started.
Django-eztables
Looked promising but it seems to be unloved and was hurt by the changes in jQuery datatables 1.10 .
The issue I got was not resolved and hence I could not move forward.
The repo has not been updated in a long while and supports django 1.4+. It would certainly need updates tu support django 2, 3 and 4.
Django-jinja-knockout
Looking at the github page, it isn’t simple it required special settings, MiddleWare and ContextProcessors
The repo has been kept alive and maintained. There is now a read-the-docs.
Definitely worth looking at again.
Django-Datatable
Hopefully I have left the best for last.
…
Nope, also had trouble with this package.
What Now?
It is very important if you have an app with even 1 table that you use django-tables2 it will make your life that much easier in terms of creating and displaying tables. (in my opinion)
I made use of the Datatables library on it’s own with django-tables2 as the packages that are supposed to do this neatly and effectively don’t really do that and are pretty much not as customisible and require lots of leg work.
In my case I just disabled server-side ordering and filtering and did not do server side pagination.
All of that is handled with datatables and it worked out pretty well.
If you have a very large data set – you might want to prefer server side functions.
I also added a few settings to make it work with bootstrap:
class UserTable(tables.Table):
'''User table
'''
class Meta:
model = User
template_name = 'django_tables2/bootstrap-responsive.html'
attrs = {
'class': 'table table-bordered table-striped table-hover',
'id': 'userTable'
}
fields = (
'first_name', 'last_name', 'email',
'company', 'role', 'employee_type',
'is_active'
)
orderable = False
empty_text = '-'
Then in the template displaying the table and initialising data tables is pretty easy with:
<div class="row">
<div class="col-xs-12">{% render_table table %}</div>
</div>and
{% block page_js %}
<script type="text/javascript" src="{% static '/js/jquery.dataTables.min.js' %}"></script>
<script type="text/javascript" src="{% static '/js/dataTables.bootstrap.min.js' %}"></script>
<script>
$(document).ready(function(){
$('#userTable').DataTable();
});
</script>
{% endblock %}