dynamically change column data dataTables

Question

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?

Sebastianb · Accepted Answer · 2016-05-20 19:57:17Z

2

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/

edited May 20, 2016 at 19:57

Sebastianb

2,06024 silver badges31 bronze badges

answered May 20, 2016 at 17:28

CMedina

4,2824 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

dynamically change column data dataTables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related