Preamble

When using server-side processing and you wish to integrate the jEditable plug-in for jQuery with DataTables, you need to consider that each time data is returned from the server, DataTables will build new DOM elements - so these need the jEditable event handlers applied to them. This is down through use of the fnDrawCallback function.

Live example

Initialisation code

$(document).ready(function() {
	var oTable = $('#example').dataTable( {
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": "scripts/server_processing.php",
		"fnDrawCallback": function () {
			$('#example tbody td').editable( '../examples_support/editable_ajax.php', {
				"callback": function( sValue, y ) {
					/* Redraw the table from the new data on the server */
					oTable.fnDraw();
				},
				"height": "14px"
			} );
		}
	} );
} );

Other examples