Preamble

When you want to detail with user selectable rows and DataTables, it is relatively simple when using DOM based data - but if using server-side processing, DataTables doesn't retain state over pages / filters etc, leaving this to the server-side instead. As such, you will need to keep a track of which rows a user as selected and mark them as selected on each draw. This is shown in this demo, which uses a unique ID assigned to the TR element (this is done automatically through the use of the DT_RowId special property returned as part of the object given by the server for each row).

Live example

Initialisation code

$(document).ready(function() {
	var aSelected = [];
	
	/* Init the table */
	$("#example").dataTable({
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": "scripts/id.php",
		"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
			if ( jQuery.inArray(aData.DT_RowId, aSelected) !== -1 ) {
				$(nRow).addClass('row_selected');
			}
			return nRow;
		}
	});
	
	/* Click event handler */
	$('#example tbody tr').live('click', function () {
		var id = this.id;
		var index = jQuery.inArray(id, aSelected);
		
		if ( index === -1 ) {
			aSelected.push( id );
		} else {
			aSelected.splice( index, 1 );
		}
		
		$(this).toggleClass('row_selected');
	} );
} );

Other examples

Basic initialisation

• Zero configuration
• Feature enablement
• Sorting data
• Multi-column sorting
• Multiple tables
• Hidden columns
• DOM positioning
• State saving
• Alternative pagination styles
• Scrolling: Horizontal / Vertical / Both / Themed / Infinite
• Change language information (internationalisation)
• ThemeRoller themes (Smoothness)

Advanced initialisation

• Events (pre initialisation)
• Events (post initialisation)
• Column rendering
• Sorting without HTML tags
• Multiple table controls (sDom)
• Defining length menu options
• Custom toolbar (element) around table
• Row highlighting with CSS
• Column grouping through col/row spans
• Row grouping
• Row callback
• Footer callback
• Change language information from a file (internationalisation)

Data sources

• DOM
• Javascript array
• Ajax source
• Server side processing

Server-side processing

• Obtain server-side data
• Add extra HTTP variables
• Use HTTP POST
• Custom column ordering (in callback data)
• Pipelining data (reduce Ajax calls for paging)
• Show and hide details about a particular record
• User selectable rows (multiple rows)

API

• Dynamically add a new row
• Individual column filtering (using "input" elements)
• Individual column filtering (using "select" elements)
• Highlight rows and columns
• Show and hide details about a particular record
• User selectable rows (multiple rows)
• User selectable rows (single row) and delete rows
• Editable rows (with jEditable)
• Submit form with elements in table
• Index column (static number column)
• Show and hide columns dynamically
• API function use in initialisation object (callback)
• DataTables scrolling and tabs
• Regular expression filtering

Plug-ins

• Add custom API functions
• Sorting and type detection
• Custom pagination controls
• Range filtering / custom filtering
• Live DOM sorting
• Automatic HTML type detection

Please refer to the DataTables documentation for full information about its API properties and methods.