DataTables logo DataTables

Wed, 8th Aug 2012

Creating feature plug-ins

DataTables provides a wealth of functionality built into its core, however it can't provide for every possible situation and to keep the core code to a sensible size it doesn't attempt to. For this DataTables provides a number of comprehensive plug-in options including sorting, filtering and API methods among others.

In this post I will look at the feature plug-in abilities and describe how a feature plug-in can be created, quite easily, for DataTables. I will also describe how to create and use a custom API method along the way - used as part of the feature plug-in. Creating feature plug-ins in this manner allow for greater code reuse and sharing of code between pages and authors. The extras available for DataTables use this feature plug-in method to integrate tightly with DataTables.

To demonstrate how to build a feature plug-in, here I will build one which will simply show and hide the paging control based on if it is needed or not (a reasonably common request in the forum). For example if the table rows can all be displayed on one page, there is no need to show the paging control (even although it is disabled at that point) - this situation can change dynamically based on the filtering applied to the table.

There are two parts to the work involved in creating this feature plug-in:

  • API method - we need to get the number of pages that are shown in the table so we know if we need to show or hide the paging control.
  • Feature plug-in - creating the plug-in that will perform the check and show / hide of the paging control


In the example below, note that the pagination control is initially shown. Now enter some text into the filtering field and the control will be removed when the results from the filter fit onto a single page.

Rendering engine Browser Platform(s) Engine version CSS grade
Trident Internet Explorer 4.0 Win 95+ 4 X
Trident Internet Explorer 5.0 Win 95+ 5 C
Trident Internet Explorer 5.5 Win 95+ 5.5 A
Trident Internet Explorer 6 Win 98+ 6 A
Trident Internet Explorer 7 Win XP SP2+ 7 A
Trident AOL browser (AOL desktop) Win XP 6 A
Gecko Firefox 1.0 Win 98+ / OSX.2+ 1.7 A
Gecko Firefox 1.5 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 2.0 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 3.0 Win 2k+ / OSX.3+ 1.9 A
Gecko Camino 1.0 OSX.2+ 1.8 A
Gecko Camino 1.5 OSX.3+ 1.8 A
Gecko Netscape 7.2 Win 95+ / Mac OS 8.6-9.2 1.7 A
Gecko Netscape Browser 8 Win 98SE+ 1.7 A
Gecko Netscape Navigator 9 Win 98+ / OSX.2+ 1.8 A
Gecko Mozilla 1.0 Win 95+ / OSX.1+ 1 A
Gecko Mozilla 1.1 Win 95+ / OSX.1+ 1.1 A
Gecko Mozilla 1.2 Win 95+ / OSX.1+ 1.2 A
Gecko Mozilla 1.3 Win 95+ / OSX.1+ 1.3 A
Gecko Mozilla 1.4 Win 95+ / OSX.1+ 1.4 A
Gecko Mozilla 1.5 Win 95+ / OSX.1+ 1.5 A
Gecko Mozilla 1.6 Win 95+ / OSX.1+ 1.6 A
Gecko Mozilla 1.7 Win 98+ / OSX.1+ 1.7 A
Gecko Mozilla 1.8 Win 98+ / OSX.1+ 1.8 A
Gecko Seamonkey 1.1 Win 98+ / OSX.2+ 1.8 A
Gecko Epiphany 2.20 Gnome 1.8 A
Webkit Safari 1.2 OSX.3 125.5 A
Webkit Safari 1.3 OSX.3 312.8 A
Webkit Safari 2.0 OSX.4+ 419.3 A
Webkit Safari 3.0 OSX.4+ 522.1 A
Webkit OmniWeb 5.5 OSX.4+ 420 A
Webkit iPod Touch / iPhone iPod 420.1 A
Webkit S60 S60 413 A
Presto Opera 7.0 Win 95+ / OSX.1+ - A
Presto Opera 7.5 Win 95+ / OSX.2+ - A
Presto Opera 8.0 Win 95+ / OSX.2+ - A
Presto Opera 8.5 Win 95+ / OSX.2+ - A
Presto Opera 9.0 Win 95+ / OSX.3+ - A
Presto Opera 9.2 Win 88+ / OSX.3+ - A
Presto Opera 9.5 Win 88+ / OSX.3+ - A
Presto Opera for Wii Wii - A
Presto Nokia N800 N800 - A
Presto Nintendo DS browser Nintendo DS 8.5 C/A1
KHTML Konqureror 3.1 KDE 3.1 3.1 C
KHTML Konqureror 3.3 KDE 3.3 3.3 A
KHTML Konqureror 3.5 KDE 3.5 3.5 A
Tasman Internet Explorer 4.5 Mac OS 8-9 - X
Tasman Internet Explorer 5.1 Mac OS 7.6-9 1 C
Tasman Internet Explorer 5.2 Mac OS 8-X 1 C
Misc NetFront 3.1 Embedded devices - C
Misc NetFront 3.4 Embedded devices - A
Misc Dillo 0.8 Embedded devices - X
Misc Links Text only - X
Misc Lynx Text only - X
Misc IE Mobile Windows Mobile 6 - C
Misc PSP browser PSP - C
Other browsers All others - - U
Rendering engine Browser Platform(s) Engine version CSS grade

Continue reading...

Fri, 4th May 2012

Introducing Editor - editing for DataTables

The primary goal of DataTables has always been to make data sets, no matter how complex, easy to access and get information from. DataTables has come along way from its origins, and with the latest plug-in for DataTables we are taking it even further - I'm delighted to introduce: Editor. With Editor, previously read-only tables can very easily be made into read / write tables.

Tables are intrinsically complex, due to the number of options that can be used to customise them and the data that they show. Building an editing interface that reflects your table could be a time consuming prospect, but with Editor making tables editable is now super easy to do.

DataTables has always had a capable API, and Editor integrates tightly with that API to provide everything you need, including UI controls, to present an editing interface to your end users. Building on five years of experience of working with dynamic DataTables enhanced tables, Editor is designed to fit in with almost every design and can be readily extended through the use of field and display plug-ins.

Continue reading...

Sun, 26th Feb 2012

DataTables debugger

As with any complex piece of software, DataTables has a huge range of configuration options and debugging the application when you encounter a problem can be quite a daunting prospect. Also, when asking for help from myself or anyone else in the forum or else where, we need as much information as possible, but succinctly presented, to be able to help solve the issue. To address these issues, I've created a debugger for DataTables.

The form that this debugger takes is as a bookmarklet. When run on a web-page that uses DataTables, the bookmarklet will gather information about the tables on the page and upload that information to the DataTables server.

When complete, you will be given a unique six character identification code for your newly created debug record, which can be used to view the information about your table. This information view will show a summary of information about the tables and software on your web-page - allowing easy access to the configuration of the table. For example: this debug record shows the information gathered from the table on the home page.

To get started with using the debugger, please visit the debugger home page:

Continue reading...

< Previous posts |
Newer posts >