DataTables

• Usage
• Examples
• Styling
• API
• Development
• Editor
• Extras
• Plug-ins
• Blog
• FAQs
• Forums

Purchase

Download

Support

Preamble

It can be quite useful at times to provide the user with the option to select rows in a DataTable. In this example we use standard jQuery 'click' events to add a class to table rows to indicate that they have been selected. Note that we use oTable.$() when working with rows in the table to ensure that all rows are considered, regardless of paging and filtering.

Live example

Delete selected row

Initialisation code

var oTable;

$(document).ready(function() {
	/* Add a click handler to the rows - this could be used as a callback */
	$("#example tbody tr").click( function( e ) {
		if ( $(this).hasClass('row_selected') ) {
			$(this).removeClass('row_selected');
		}
		else {
			oTable.$('tr.row_selected').removeClass('row_selected');
			$(this).addClass('row_selected');
		}
	});
	
	/* Add a click handler for the delete row */
	$('#delete').click( function() {
		var anSelected = fnGetSelected( oTable );
		if ( anSelected.length !== 0 ) {
			oTable.fnDeleteRow( anSelected[0] );
		}
	} );
	
	/* Init the table */
	oTable = $('#example').dataTable( );
} );


/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
	return oTableLocal.$('tr.row_selected');
}

Other examples