DataTables

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. 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)
• Scrolling options for table viewport
• Fully internationalisable
• jQuery UI ThemeRoller support
• Rock solid - backed by a suite of 2900 unit tests
• Wide variety of plug-ins inc. Editor, TableTools, FixedColumns and more
• 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
• Advanced data source options
• Commercial support available
• Fully accessible for screenreaders / keyboard access
• Sensible file size: 70K minified, 20K gzip'd
• Extensive plug-in support
  • Sorting, type detection, API functions, pagination and filtering
• Fully themeable by CSS
• Solid documentation
• 130+ pre-built examples

So how easy is it to use DataTables? Take a peek at the code below, a single function call to initialise the table is all it takes:

/* 
 * Example init
 */
$(document).ready(function(){
	$('#example').dataTable();
});

An example of DataTables in action is shown below with a table of CSS browser grading as used by Conditional-CSS.