Preamble

Using DataTables in-combination with the excellent jEditable plugin for jQuery allows you to produce a table which can have individual cells edited. The table can then be updated such that filtering, sorting etc. will all work as expected. This is showing in the demo below.

Live example

Initialisation code

var oTable;

$(document).ready(function() {
	/* Apply the jEditable handlers to the table */
	$('#example tbody td').editable( function( sValue ) {
		/* Get the position of the current data from the node */
		var aPos = oTable.fnGetPosition( this );
		
		/* Get the data array for this row */
		var aData = oTable.fnGetData( aPos[0] );
		
		/* Update the data array and return the value */
		aData[ aPos[1] ] = sValue;
		return sValue;
	}, { "onblur": 'submit' } ); /* Submit the form when bluring a field */
	
	/* Init DataTables */
	oTable = $('#example').dataTable();
} );

Other examples

Basic initialisation

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

Advanced initialisation

• Events (pre initialisation)
• Events (post initialisation)
• Column rendering
• Sorting without HTML tags
• Row callback
• Footer callback
• Ajax source
• Change language information from a file (internationalisation)

API

• Dynamically add a new row
• Dynamically create a table
• Individual column filtering
• Highlight rows and columns
• User selectable rows (multiple rows)
• User selectable rows (single row) and delete rows
• Editable rows (with jEditable)
• Submit form with elements in table
• Add custom API functions (plug-ins)

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