DataTables
Previous posts
Thu, 27th Sep 2012
Microsoft CDN
Thu, 9th Aug 2012
Orthogonal data
Thu, 9th Aug 2012
Extended data source options with DataTables
Wed, 8th Aug 2012
Creating feature plug-ins
Fri, 4th May 2012
Introducing Editor - editing for DataTables
Sun, 26th Feb 2012
DataTables debugger
Wed, 1st Feb 2012
Twitter Bootstrap 2
Mon, 16th Jan 2012
localStorage for state saving
Thu, 8th Dec 2011
Twitter Bootstrap
Tue, 1st Nov 2011
Site updates - JS Bin and more
Sat, 27th Aug 2011
Getting started with DataTables: First steps
Wed, 29th Jun 2011
DataTables support
Sun, 19th Jun 2011
Drill-down rows
Sat, 11th Jun 2011
Introducing Scroller - Virtual Scrolling for DataTables
Sat, 4th Jun 2011
DataTables 1.8
Tue, 31st May 2011
Inline editing
Tue, 10th May 2011
Creating beautiful and functional tables with DataTables
RSS feeds
DataTables blog feed
DataTables news feed
DataTables releases feed
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
Example
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 |
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.
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 DataTables.net home page.
To get started with using the debugger, please visit the debugger home page: