Preamble

It can be quite useful at times to provide the user with the option to select rows in a DataTable. This can be done using the API functions that DataTables provides. The example below uses the fnRowCallback() function to add a 'click' listener to each row, which will highlight the required row when selected. The indexes of the selected rows are then provided through the custom function fnGetSelected() for later processing.

Live example

Initialisation code

var oTable;

$(document).ready(function() {
	/*
	 * Append an indicator element to each row - this will be changed dynamically depending
	 * on whether or not the row is selected
	 */
	var nCloneTd = document.createElement( 'td' );
	nCloneTd.appendChild( document.createTextNode( '0' ) );
	
	var nCloneTh = document.createElement( 'th' );
	nCloneTh.appendChild( document.createTextNode( '0' ) );
	
	$('#example tbody tr').each( function () {
		this.appendChild( nCloneTd.cloneNode( true ) );
	} );
	
	$('#example thead tr').each( function () {
		this.appendChild( nCloneTh.cloneNode( true ) );
	} );
	
	/*
	 * Build the table
	 */
	oTable = $('#example').dataTable( {
		"aoColumns": [ 
			null,
			null,
			null,
			null,
			null,
			{
				"bVisible": false,
				"bSearchable": false,
				"bSortable": false
			}
		],
		"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
			/* Deal with a click on each row */
			$(nRow).click( function() {
				/* Check if we are adding or removing a row */
				if ( aData[5] == 1 )
				{
					aData[5] = 0;
				}
				else
				{
					aData[5] = 1;
				}
				
				/* Change the class based on selection */
				this.className = (aData[5] == 1) ?
					this.className+'_selected' :
				 	this.className.replace( /_selected/, "" );
			} );
			
			/* For each draw - set the class based on the stored data */
			nRow.className = (aData[5] == 1) ?
				nRow.className+'_selected' :
			 	nRow.className.replace( /_selected/, "" );
			
			return nRow;
		}
	} );
} );

function fnGetSelected( oTableLocal )
{
	var aSelected = new Array();
	var aaData = oTableLocal.fnSettings().aaDataMaster;
	for ( var i=0 ; i<aaData.length ; i++ )
	{
		if ( aaData[i][5] == 1 )
		{
			aSelected.push( i );
		}
	}
	
	return aSelected;
}

Other examples

Basic initialisation

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

Advanced initialisation

• Column rendering
• Sorting without HTML tags
• Row callback
• Footer callback
• Change language information from a file (internationalisation)

API

• Dynamically add a new row
• Dynamically create a table
• Individual column filtering
• User selectable rows

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