Preamble

The highlighting of rows and columns have be quite useful for attracting attention to where the user's cursor is in the data array. Of course the highlighting of a row is easy enough using CSS, but for column highlighting, you need to use a little bit of Javascript. This example shows that in action on a DataTables enhanced table - this type of effect would be particularly effective on tables with dense information.

Live example

Initialisation code

var oTable;

$(document).ready(function() {
	$('#example tbody td').hover( function() {
		var iCol = $('td').index(this) % 5;
		var nTrs = oTable.fnGetNodes();
		$('td:nth-child('+(iCol+1)+')', nTrs).addClass( 'highlighted' );
	}, function() {
		var nTrs = oTable.fnGetNodes();
		$('td.highlighted', nTrs).removeClass('highlighted');
	} );
	
	oTable = $('#example').dataTable( {
		"bSortClasses": false
	} );
} );

Other examples

Basic initialisation

• Zero configuration
• Feature enablement
• Sorting data
• Multi-column sorting
• Multiple tables
• Hidden columns
• DOM positioning
• State saving
• Alternative pagination styles
• Change language information (internationalisation)

Advanced initialisation

• Events (pre initialisation)
• Events (post initialisation)
• Column rendering
• Sorting without HTML tags
• Row callback
• Footer callback
• Ajax source
• Change language information from a file (internationalisation)

API

• Dynamically add a new row
• Dynamically create a table
• Individual column filtering
• Highlight rows and columns
• User selectable rows (multiple rows)
• User selectable rows (single row) and delete rows
• Editable rows (with jEditable)
• Submit form with elements in table
• Add custom API functions (plug-ins)

Please refer to the DataTables documentation for full information about it's API properties and methods.