I am often asked to display a set of data that is useful for the site visitor. This often means that the data is to be sortable by one or more fields and easily searchable. In addition, it should have an an aesthetic appeal to make it easier to read.
Traditional methods to display data (such as HTML tables and nested divs) are static. In order to make the tables functional a significant amount of back end processing has to be designed and incorporated through MySQL database queries, which can be quite tedious and costly. Thankfully, there is a way to make tables dynamic, useful, and appealing without much effort at all: DataTables.
I have been using the DataTables jQuery plugin for several years and I am always impressed by how easy it is to perform complex functions. By just including the CSS and JS libraries (which can be acquired via CDN) and including some basic jQuery code, you can turn a static table into something useful and powerful. Furthermore, the CSS library lets you style your table quickly so you can focus on more pressing issues.
DataTables is very customizable. For instance, you can choose whether or not to use pagination and, if so, the number of items per page. The default sorting can be set, as well as including hidden columns that are filterable. The DataTables website has numerous well-document examples to help you hit the ground running.
In addition to the basic functionality, DataTables offers several useful extensions to further enhance the display and functionality of the data. One of the more crucial of these in the current trend of “mobile-first” design is the Responsive extension. As anyone who has tried to use tables in the traditional manner knows, making horizontal data responsive is a veritable nightmare and often cost-prohibitive. Thanks to the Responsive extension, with just a minimal amount of code your table will be responsive on mobile devices by removing and reformatting selected columns vs crudely mashing the data together. In fact, this is probably reason enough to use DataTables on all your tables, even if they don’t necessarily need searching or sorting.
I have also used the Table Tools extension quite often. It allows the user the ability to instantly download a spreadsheet and/or PDF of the data presented in the table with a single click of the included buttons. Adding a few lines of code with this extension can take the place of hours of painstaking coding.
The DataTables plugin has been very useful for many of my projects, and I would eagerly recommend it to anyone who needs to display tables on their sites.