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.
| Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
|---|---|---|---|---|
| Loading data from server | ||||
| Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
DataTables
$(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"
} );
}
} );
} );
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.