DataTables server-side processing with user selectable rows example

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

ID Rendering engine Browser Platform(s) Engine version CSS grade
Loading data from server
ID Rendering engine Browser Platform(s) Engine version CSS grade

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

Advanced initialisation

Data sources

Server-side processing

API

Plug-ins

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