Enhancing the look and feel of tables
Recently we have looked at improving some of the tables in CLUMP. At first we thought that it would involve quite a bit of work, but then we came across the DataTables jQuery plugin. After a couple of days of coding we’ve used it to enhance a number of tables on our development version of CLUMP. Key features that attracted us to it are:
DataTables is made available under an MIT Licence, so it is very developer friendly.
Easy to apply to existing tables
As one of the many data sources that DataTables supports is the DOM you can use it to quickly enhance an existing table.
Sometimes a long table can be unwieldy, with the pagination options in DataTables you can specify how many entries to show by default and how the next/previous page options should be presented to the user. Of Course you can disable the pagination to display the data in one full table.
One of the most useful features DataTables has is its ability to allow the user to order the table by any column by simply clicking on that column’s header, an action that has become second nature to a lot of users. It’s also possible to provide custom sorting functions for columns if the standard sorting options don’t work for the data they contain.
As users type their search terms into the search box DataTables hides table rows that don’t meet the current search criteria.
There are a number of extensions available for DataTables that enhance its features, from allowing users to reorder the column by dragging their headers about, to adding the option for users to export the table to the clipboard or exporting it as a CSV, XLS or even a PDF.
If you have some bespoke functionality required then you can use its plug-in Architecture to create your own plugin to meet it.
Comments are closed.