lbrahim lbrahim - 5 days ago 5
jQuery Question

jQuery DataTable Inline Editing

I have been trying to implement simple Inline editing in jQuery Datatable. But I cannot activate the edit that happens on click on a row cell. I used the same code as in their site Link:

<table id="Datatable" cellpadding="0" cellspacing="0" border="0" class="display">
<thead>
<tr>
<th>Age</th>
<th>Name</th>
</tr>
</thead>
</table>


Datatable Binding:

/* Init DataTables */
var oTable = $('#Datatable').dataTable({
"bProcessing": true,
"sAjaxSource":"http://localhost:6220/DataSources/WCF/Data.svc/GetCustomer",
"aoColumns": [
{ "mDataProp": "Age" },
{ "mDataProp": "Name" }
]
});

/* Apply the jEditable handlers to the table */ oTable.$('td').editable('http://localhost:6220/DataSources/WCF/Data.svc/SaveCustomer', {
tooltip: 'Click to edit...',
"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",
"width": "100%"
});


Any suggestions are highly appreciated.

Answer
Comments