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