<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="ssp" order="7">

<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />

<title>Row selection</title>
<js><![CDATA[

$(document).ready(function() {
	var selected = [];

	$("#example").DataTable({
		"processing": true,
		"serverSide": true,
		"ajax": "scripts/ids-arrays.php",
		"rowCallback": function( row, data ) {
			if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
				$(row).addClass('selected');
			}
		}
	});

	$('#example tbody').on('click', 'tr', function () {
		var id = this.id;
		var index = $.inArray(id, selected);

		if ( index === -1 ) {
			selected.push( id );
		} else {
			selected.splice( index, 1 );
		}

		$(this).toggleClass('selected');
	} );
} );

]]></js>

<info><![CDATA[

When you want to have user selectable rows in DataTables, it is relatively trivial when using DOM based data - but when using server-side processing, DataTables doesn't retain DOM row elements over pages / filtering etc. 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) to track which rows are selected and reselect them is appropriate on a draw.

If you are looking for a more complete and easier to use row selection option, the [Select extension](https://datatables.net/extras/select) provides an API that is fully integrated with DataTables for selecting rows and acting upon that selection.

]]></info>

</dt-example>
