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).