Data from Ajax, Edit in Place

jwingate

The code I have currently grabs a result set and build the table dynamically. However, I cannot figure out how to get jeditable to work with the dynamically created table. I have viewed the examples, and they are all for data that is already in the table. Thanks for any information!

mdcook

I am also having a similar problem. Within a Drupal site, I have a search form for users to query a science database. Initially the page loads with the search form above a dynamically created table containing the whole database. After a user submits a search query using the form, using the results I build a new array for the table, but I can not figure out how to update/edit the table.

Thanks for any help. If I figure this out, I will post what I did.

allan

Hi guys,

The issue is that the DOM is created after the table has been created, therefore you need to add the events after that event. These links might be useful for you:

http://datatables.net/examples/example_events_pre_init.html
http://datatables.net/examples/example_events_post_init.html
http://datatables.net/forums/comments.php?DiscussionID=159
http://sprymedia.co.uk/article/Visual+Event - lets you see what elements have events applied to them.

Regards,
Allan

jwingate

Here is the code I ended up going with which works great, even with pagination. My table has about 1500 rows, and this worked perfectly. (The part to pay attention to is in the row callback...."fnRowCallback"

[code]
oTable = $('#displayData').dataTable(
{
"sDom" : '<"top"flip>rt<"bottom"<"clear">',
"bAutoWidth" : false,
"bProcessing" : true,
"fnRowCallback" : function (nRow, aData, iDisplayIndex) {
$(nRow).attr('id', 'row_' + aData[0]);

for (i = 0; i < aData.length; i ++) {
$('td:eq(' + i + ')', nRow).editable('/async/edit/', {
'callback': function (sValue, y) {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(sValue, aPos[0], aPos[1]);
},
'height': '14px'
});
}

return nRow;
},
"sAjaxSource" :
'<?= $this->baseUrl(); ?>/async/fetchall/type/' + type + '/db/' + db
}
);
[/code]

* Edited by Allan to add code highlighting.

allan

Awesome stuff - thanks for sharing this jwingate!!

jwingate

Well thank you for dataTables....its amazing!