Datatable + jEditable - get heading of column being edited

jagdipa

I love Datatable, and using jEditable with it is a joy.

My issue is really with jEditable. When I edit a column, I can easily get the row and column for the data that was edited. I want to then update a JSON source with the data. Code for this is below.

[code]

$('#.editTextArea').editable(function (value, settings) {
var aPos = oTable.fnGetPosition(this);
alert(aPos);
alert(value);
alert(this);
//Update JSON data here fnUpdateJSON(aPos[0], aPos[1], value);
return (value);
}, {
"callback": function (sValue, y) {
// Redraw the table from the new data on the server
oTable.fnDraw();
},
height: "auto",
placeholder: "",
type: "textarea",
submit: 'OK'
});

[/code]


What I would like to do is, from the column index, get the table heading (or even better, the mDataProp value). I would then use this to update the JSON, rather than relying on column indexes.

Is there a way to do this?

fbas

There is an existing plugin/integration with jEditable that will do most of this for you: http://code.google.com/p/jquery-datatables-editable/
or you could see how they approach the solution.

there are also DataTables API functions for getting the row values (and thus values of any column in the row); you can use this to get an index/mdataprop-ish value:
http://www.datatables.net/ref#fnGetData and pass the row node or an integer for the the row index (aPos[0])

jagdipa

I have already spent a lot of time getting the jEditable working, so I dont want to change all my code again.

I was trying this out, and getting a strange error. When I use fnGetPosition(), I get the correct position. But the fnGetData() function always returns null. What am I doing wrong?

[code]

$('#htaTableBind tbody .editTextArea').editable(function (value, settings) {
var aPos = oTable.fnGetPosition(this);
var aData = oTable.fnGetData(this);
updateTableValueToJSON(htaMenuOption, aPos[0], aPos[1], value);

alert(aData); //aData returns null????

return (value);
}, {
"callback": function (sValue, y) {
// Redraw the table from the new data on the server
oTable.fnDraw();
},
height: "auto",
placeholder: "",
type: "textarea",
submit: 'OK'
});

[/code]

fbas

rather than passing "this" to fnGetData (I'm assuming "this" is a cell or element in a cell?), pass in aPos[0] (the row index) or a row element (parent of "this" that is a TR). see http://www.datatables.net/ref#fnGetData

[code]
$('#htaTableBind tbody .editTextArea').editable(function (value, settings) {
var aPos = oTable.fnGetPosition(this);
var aData = oTable.fnGetData(aPos[0]);
// etc.
[/code]