Using jeditable with Dynamic Javascript Array as source data

dorthwein

Hello,

Great addition to jQuery, thank you for all your hard work.

I am wondering if you can use jEdtiable with a aaData and aoColumns. I've double checked everything making sure that my arrays work without jeditable and that jeditable works when I use an inline table with hardcoded cols/rows.

Any way heres where I'm at so far -
[code]

$(document).ready(function() {
/* Add Table */
$('#content').html( ' ' );
var oTable = $('#DTable').dataTable();

// Initialize DataTable
$('td', oTable.fnGetNodes()).editable( 'http://www.datatables.net/examples/examples_support/editable_ajax.php', {
"aaData" : aaData,
"aoColumns" : aoColumns,
"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"

} );
});
[/code]

dorthwein

ps Table does load, but no data in it.

allan

It is indeed possible, there there are a couple of issues with your code above. Firstly you are using DataTables initialisation properties in the jEditable initialisation (aaData etc) - jEditable will just ignore that. So you want to use the right properties with the right software :-). That should get you going I think!

Allan

dorthwein

And the mighty Allan has spoken!

Wow I can'y believe I didn't catch that - Just wow! hahah. Also I must say I'm amazed by the fast response - I Struggle over the problem with my morning coffee, post help, decide to get lunch, finish my salad then BOOM Allans there.

I'm so impressed I think I'm going to donate in the next week or so. Just incase some one ends up like me I'm going to post the solution code. Big thing was moving the "aaData" & "aoColumns" from the jeditable initializer to the DataTables initializer (newb moment I know heheh)

[code]
$(document).ready(function() {
/* Add Table */
// Initialize DataTable
$('#content').html( ' ' );
var oTable = $('#DTable').dataTable( {
"aaData" : aaData,
"aoColumns" : aoColumns
});

// Intialize jEditables
$('td', oTable.fnGetNodes()).editable( 'http://www.datatables.net/examples/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"

} );
});

[/code]

allan

Heh :-). Good to hear that did the job for you - nice one. And thanks for posting your working code.

Regards,
Allan