Need help with cell().data(), implementing DataTables with x-editable

mimhof

Greetings, I am using x-editable with DataTables and upon success from x-editable post, I know I need to access teh DataTables api and use cell().data() in order to update the newValue so it is searchable by DataTables. However, I am having a real hard time
inside this function getting the cell, can anyone point me along?

var dtoptions = { } ; // all my normal stuff in here

var mytable = $('#w-458-datatable').DataTable( dtoptions );

$('.editablestuff').editable({
success: function(response, newValue ) {

/// HERE IS WHERE I NEED HELP
// cannot seem to grab the cell that was clicked in order to call  cell().data( newValue  );
///   
        var cell = mytable.cell( this );  // THIS IS NOT GRABBING IT
        cell.data( newValue ).draw(); // SO THIS IS NOT WORKING
},

error: function(response, newValue) {
  return response.msg;
if(response.status === 500) {
    return 'Service unavailable. Please try later.';
} else {
    return response.responseText;
}

}

});

http://datatables.net/reference/api/cell%28%29.data%28%29

mimhof

Update to what I figured out in case someone else finds their way here. I have it working now. It is necessary to place all your xeditable options in an object so it can be used after each time it is re-attached. Also, finally understood how to grab the cell with $(this).closest('td') in order to work on it. (Not sure why that was so hard to see at first - but I am just working with 1.10 now for only 48 hours and trying to catch up on the docs.)

Bottom line is that I now have x-editable attached dynamically as needed, where needed by using columnDefs render, and then by using the success option in x-editable, I am properly updating my DataTable so it is up to date and searchable. Then reattaching x-editable. (By the way, I am not using data-url in x-editable to send to server the updated field, I have another whole method relevant to me application that I will send it to from within the success option..and it has all necessary logic to handle the json response from my server for success/fail notification and gui update.)

Would like to see if any of the active experienced engineers have a more elegant opinion on this:

// begin example
var dtoptions = {
//my datatable options
"data": [], // my data is here, empty for example
"columnDefs": [
{ "targets": 2,
"render": function ( data, type, full, meta ) {
// need to set data-name, data-type, data-pk, data-title dynamically - hard coded now for example
return '<a class="xeditable" href="#" data-name="tablename" data-type="text" data-pk="1" data-title="Enter username">'+data+'</a>';
}
}
]
};

var xeditableoptions = {
//my datatable options
mode: 'inline',
success: function(response, newValue ) {
var td = $(this).closest('td') ;
var table = $('#my-datatable').DataTable() ;
table.cell( td ).data(newValue).draw() ;
// grab the a tag again because we need to reattach xeditable
var newa = td.find('a') ;
newa.editable(xeditableoptions);
},
error: function(response, newValue) {
if(response.status === 500) {
return 'Service unavailable. Please try later.';
} else {
return response.responseText;
}
}
} ;

$('#my-datatable').DataTable( dtoptions ); // init the dt
$('.xeditable').editable(editoptions); // attach x-editable to all a tags with class xeditable.

// end example