JQuery DataTables with WordPress and Drupal
DataTables works with most popular CMS and web based CRM systems with plugins available out-of-the-box for many of these, including WordPress, Drupal and Joomla.
I’ve recently been using the DataTables JQuery scripts for a couple of tables on a WordPress and a Drupal site, so I’m taking the opportunity to briefly discuss the plugins I’m using, and the differences using DataTables with these 2 content management systems.
DataTables for WordPress
Using DataTables with WordPress couldn’t be easier. There’s a great free plugin “TablePress” available from WordPress.org that takes all the effort out of setting up the JQuery system to use. TablePress has one major difference compared to the Drupal module I’m using. Tables are created using a table builder, and embedded in a WordPress post/page using a shortcode.
This means you can’t just set the plugin to work with an existing table, as you can with the Drupal method. On the other hand, it’s not all that difficult to import the existing table into a new Table Press table.
The plugin provides a lot of options for importing data; Excel spreadsheet (.csv), HTML format, JSON, as well as XML (which is an experimental feature and still a bit buggy). You can also import by uploading a file, or from a web URL.
Adding data and editing the table is simple. The table editor has a clear easy to use interface, with all the functions you could need to add data, add rows, columns or delete any of these. There are options to select which of the DataTables functions to use with the table, and even add your own styles using CSS classes.
DataTables for Drupal
Drupal’s Table Trash module provides JQuery DataTables for the Drupal 7 site. This module works a lot differently to the WordPress plugin.
Editing a table is done using your choice of Drupal WYSIWYG editor.
Installing the Drupal Table Trash module is not as simple as the WordPress plugin. As well as the module, you must download the DataTables scripts from github and upload the files to the Drupal Libraries folder. Instructions are somewhat incomplete as they don’t tell you to rename the unzipped folder, or what to name it either. (Rename the folder datatables).
But once all the needed files are in the right places and the directory has the right name, saving the module style settings finishes the set-up. If something is wrong, the useful Drupal system report will let you know.
Once installed, all you need to do is add the relative path to the page (or pages) with an HTML table you want to use with the DataTable style.
You can create as many different styles as required, using more or fewer functions. Each style can then be used with as many pages as you want. It’s even possible to use it for a single HTML table on a page with 2 tables or more – using table ID.
Different Methods, Same Result
While the way you use DataTables with WordPress and Drupal differs, the end result is very similar; visitor friendly tables of data.
The default styling is somewhat different, but it can be customised. Customising the tables in Drupal is probably easier, but either platform will need you to edit some CSS files.
The system is especially useful for long lists of tabular data. Instead of a long block of data, the pager function reduces the amount of data visible immediately into a smaller less daunting block. If you want, you can let your visitors choose how many entries to show as well as using the paged view. The search tool makes it easier to find data as well.