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.

If you are interested in a full CRUD implementation for DataTables, check out the Editor plug-in for DataTables, which provides a flexible and easy to use create, edit and delete environment for DataTables controlled tables with full server interaction.

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"
			} );
		}
	} );
} );

Server response

The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.

Other examples