DataTables – table plug-in for jQuery

The other day I had to write a  NOC application that shows all active phone lines in an out of a customers telecom cluster, thats a lot of constantly changing data that needed to be displayed.

Some design requirements was;

• *NO* refreshes i.e. blinking screen parts (gives NOC personel an epileptic fit after a day staring at it).
• No direct database access – read only Json proxy.
• Near realtime – 1 second updates.
• Group lines on customer. Toggle on and off.
• Sortable on all visible columns.
• Searchable and one click filters.
• Has to work in an Dojo ContentPane.
• 100% translatable

To the rescue; DataTables is a plug-in for the jQuery Javascript library.  It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

I can’t recommend it highly enough, configuration is as easy or as hard as you require it to be, draw up a file with a regular table,thead,tbody,tfoot table put it’s id to be example and place this code snippet into the file;
/*
* Example init
*/
$(document).ready(function(){
$('#example').dataTable();
});

Then popp over to Allans excellent Examples page! and if you dont have a sortable, searchable and great looking grid in about 5 minutes, I owe you a beer!
Key features:

• Variable length pagination
• On-the-fly filtering
• Multi-column sorting with data type detection
• Smart handling of column widths
• Display data from almost any data source
• DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
• Fully internationalisable
• jQuery UI ThemeRoller support
• Rock solid – backed by a suite of 1300+ unit tests
• Wide variety of plug-ins inc. TableTools, FixedHeader and KeyTable
• It’s free!
• State saving
• Hidden columns
• Dynamic creation of tables
• Ajax auto loading of data
• Custom DOM positioning
• Single column filtering
• Alternative pagination types
• Non-destructive DOM interaction
• Sorting column(s) highlighting
• Extensive plug-in support
• – Sorting, type detection, API functions, pagination and filtering
• Fully themeable by CSS
• Solid documentation
• Full support for Adobe AIR

Go NOW and take a peek DataTables (table plug-in for jQuery).