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 in the first (and hidden) column.

Credit for this example belongs with forum member iuliandum. Thanks!

Live example

Initialisation code

var oTable;
var gaiSelected =  [];

$(document).ready(function() {
	$('#form').submit( function() {
		alert (gaiSelected);
		return false;
	} );

	/* Init the table */
	oTable = $("#example").dataTable({
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": "../examples_support/server_processing_id.php",
		"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
			if ( jQuery.inArray(aData[0], gaiSelected) != -1 )
			{
				$(nRow).addClass('row_selected');
			}
			return nRow;
		},
		"aoColumns": [
			{ "bVisible": 0, "aTargets": [0] }
		]
	});
	
	/* Click event handler */
	$('#example tbody tr').live('click', function () {
		var aData = oTable.fnGetData( this );
		var iId = aData[0];
		
		if ( jQuery.inArray(iId, gaiSelected) == -1 )
		{
			gaiSelected[gaiSelected.length++] = iId;
		}
		else
		{
			gaiSelected = jQuery.grep(gaiSelected, function(value) {
				return value != iId;
			} );
		}
		
		$(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.