DataTables: Add a Editable Row

fubowl

After searching your forums, I didn't find an answer to what I thought should be an easy question:

How do you add a row that's editable. I took note of the two examples located at
http://www.datatables.net/examples/api/editable.html &
http://www.datatables.net/examples/api/add_row.html

So while putting the two together I have the following:


/* Global var for counter */
var giCount = 1;


$(document).ready(function() {
/* Init DataTables */
var oTable = $('#example').dataTable();

/* Apply the jEditable handlers to the table */
$('td', oTable.fnGetNodes()).editable( '../examples_support/editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
} );
} );

function fnClickAddRow() {
$('#example').dataTable().fnAddData( [
giCount+".1",
giCount+".2",
giCount+".3",
giCount+".4",
giCount+".5" ] );

giCount++;
}


However, when calling fnClickAddRow(), the row is not editable like the rest of the table. So any ideas how I can apply the jEditable handlers to the newly added row? Thanks.

PaoloValladolid

I'd be interested in answers to this as well.