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

- Zero configuration
- Feature enablement
- Sorting data
- Multi-column sorting
- Multiple tables
- Hidden columns
- DOM positioning
- State saving
- Alternative pagination styles
- Scrolling: Horizontal / Vertical / Both / Themed / Infinite
- Change language information (internationalisation)
- ThemeRoller themes (Smoothness)

## Advanced initialisation

- Events (pre initialisation)
- Events (post initialisation)
- Column rendering
- Sorting without HTML tags
- Multiple table controls (sDom)
- Defining length menu options
- Custom toolbar (element) around table
- Row highlighting with CSS
- Column grouping through col/row spans
- Row grouping
- Row callback
- Footer callback
- Change language information from a file (internationalisation)

## Data sources

- DOM
- Javascript array
- Ajax source
- Server side processing

## Server-side processing

- Obtain server-side data
- Add extra HTTP variables
- Use HTTP POST
- Custom column ordering (in callback data)
- Pipelining data (reduce Ajax calls for paging)
- Show and hide details about a particular record
- User selectable rows (multiple rows)

## API

- Dynamically add a new row
- Individual column filtering (using "input" elements)
- Individual column filtering (using "select" elements)
- Highlight rows and columns
- Show and hide details about a particular record
- User selectable rows (multiple rows)
- User selectable rows (single row) and delete rows
- Editable rows (with jEditable)
- Submit form with elements in table
- Index column (static number column)
- Show and hide columns dynamically
- API function use in initialisation object (callback)
- DataTables scrolling and tabs
- Regular expression filtering

## Plug-ins

- Add custom API functions
- Sorting and type detection
- Custom pagination controls
- Range filtering / custom filtering
- Live DOM sorting
- Automatic HTML type detection

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