dynamically change column data dataTables

Question

http://jsfiddle.net/c3coukLz/

t = $('#example').DataTable();
$('tbody tr').click(function() {
  $(this).find('td:last').text('B');

  //get back data
  var tr = $(this);
  var row = t.row(tr); // worked!
  console.log(row.data()); // won't work
});

Everything seems to work but when I do row.data(), it got me back the old data before DOM manipulation. It seems like I have to somehow 'update' the datatable. How to manipulate column data programmatically using jquery?

Answer 1

You can use cell for altering data. indicate the row and column of the cell to modify. Use data to assign the new value and draw to refresh the table.

Try this code:

$('#example tbody').on( 'click', 'tr', function () {
   //get back data
   var row = t.row( this );
   t.cell(row, 4).data("B").draw();
   console.log(row.data());
});

Result: http://jsfiddle.net/cmedina/c3coukLz/1/