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');
	} );
} );

Server response

The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.

Other examples