I have been using jQuery DataTables for some years now, and have yet to find anything better. With its ability to produce tables with AJAX, built in sorting, filtering and more, I have used it to display datasets of over a million records. The problem comes when writing the backend code to create the DataTable and handle the AJAX requests. Recently, I started writing a Django application to track my job applications, since the spreadsheet was getting unwieldy with hundreds of rows. But unlike using PHP and Zend Framework, I have a ways to go.
First, a glimpse at what I did with DataTables, with PHP and Zend Framework. Below is a screenshot of one of the DataTables with a large dataset on the backend. It is from a demo site of what a stock broker might have, which lists customers with their portfolio balances. The rows can be sorted or filtered based on selected criteria, columns can be hidden, revealed, or reordered, and when the user clicks on a given row, it takes them to a page focused on the customer giving details about their portfolio, etc. And at the heart of things is a specialized controller which handles all the various databases, and an accompanying JavaScript file which gets initialized by the controller and a backend wrapper script. Here is that DataTable.
(Mind you... this was a demo, and in a real site, the SSN would at most display only the last 4 digits, even though the filter for the column would perhaps allow for entering all 9 digits).
Now, for my Django project, I started off with just writing a regular HTML table, then turning jQuery DataTables loose on it do pagination. Certainly something which can be done with a few hundred records, but longer tables would start getting painful, and so, it was only a stop-gap. This is what I did with about an hours worth of work on the model, the view and the template, with a bit of JavaScript. Note this is a far cry from the DataTable I showed before, as it does not use AJAX for starters, nor does it have all the other bells and whistles.
Now, in looking at having DataTables use AJAX requests, I saw three major routes to implement this, they were (in initial order of desirability):
- Write my own REST/AJAX interface from scratch... the least ideal option.
- Use Django Rest Framework
- Use django-ajax-datatables
To evaluate these, I set out to spend roughly two hours each to see how far I could get, and here are the results.
Django Rest Framework (DRF)
To use Django Rest Framework, one starts with installing the Python module for it with the command pip install djangorestframework. Then, like all such modules, we end up adding it to the installed applications list in settings.py. Then you create a new application for the API itself (which I did before the last step to save time). From there, you create the view scripts for the API, which is where most of the work lies, a serializer and a few other tidbits, then create a view to serve up the empty table and initialize the DataTable. So this implementation leaves all the DataTable work itself the developer. And here are the results.
Note that this is not exactly the same, as the Edit button does not work, but that is a minor change. Also, the sorting does not work, which is a bigger issue.
The code changes associated with this work can be seen here.
django-ajax-datatables
The other backend option was to use django-ajax-datatables. As before, you start by installing the module with pip. However, unlike DRF, you don't create a separate application, but create a special view and URL in your existing application. On the whole, the changes are much simpler, as the simple view and URL do the work of the entire additional API application. One nice feature out of the box is the ability to add a column which expands a row to show details. Here are the screenshots for the results.
The code changes can be seen here. It should be noted that unlike DRF, sorting and the actions button work, and as you can see from the second image, it displays a pretty details section complete with clickable links, without going to a separate page. One negative, however, is how the entry selector and search box are broken relative to the other implementations.
Summary
Of the two, I like the initial results of the django-ajax-datatables more. For the same amount of time, I get working sorting, along with a inline details section. However, I suspect that with DRF, I would ultimately be able to produce the same results, and even get results similar to what I did with my custom controller with PHP and Zend Framework, though perhaps not as conveniently as I did on the backend. I am, in the meantime, going to continue to look at DRF a bit more, as it gives me that extra bit of flexibility, and I have some ideas as to how to implement column specific filtering as well as the sorting which the current implementation lacks. The one downside to DRF which will not go away, however, is that the view scripts will require unit tests far more than the simple view script for django-ajax-datatables. So maybe, that is the better direction to go, ultimately. We shall see...