JQuery DataTables


JQuery DataTables with WordPress and Drupal

wordpress and drupal datatables thumbnail imageDataTables is a plug-in for the jQuery Javascript library. DataTables is a very flexible tool for adding advanced interactions to to any HTML table. It adds controls providing searching, sorting and pagination.

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

screenshot of datatables wordpress exampleUsing 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.

screenshot of datatables drupal exampleThe first and biggest difference is that it works with any HTML table using modern HTML syntax. This means you can use DataTables to add the JQuery functions to any existing HTML tables. No need to rebuild the table as with the WordPress method. It’s not even necessary to edit a page with an existing HTML table, just assign the DataTables JQuery JavaScripts to the page using the module configuration setup.

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.

Better Tables

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.

me on google plus+Mike Otgaar

Advertisements

About Mike

Web Developer and Techno-geek Saltwater fishing nut Blogger

Posted on December 1, 2013, in TECH NOTES and tagged , , , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: