Jquery datatables: update cell cell after button click

Question

we have a table on our page, with several rows and a custom toggle button at the end. the table is loaded via html on the page, not through json.

now, togglebutton at the end of the message to the service and sets the next state of this record in the database.

however, he must also do an update for another cell in this row. however, I'm sure I should not do this using jquery manually, but through datatables?

$('#tblFollow').dataTable({ sDom: "t", aoColumns: [ null, null, null, { bSortable: false } ] }); $('#tblFollow').on('click', 'a.follow', function(e){ $(this).toggleClass('active'); // updating column 'following' here... // but this only changes visually, and not the inner datatables data used for sorting var followingCell = $(this).parents('td').prev(); var txt = followingCell.text() == "1" ? "0" : "1"; followingCell.text(txt); return false; }); 

leadership example: now I have an example where I change the fields manually, but this is only visual, the datatable still uses its internal data for sorting. So I'm looking for a way to make it better

Answer 1

Here is a possible solution:

In addition to your code, you should update the datatables as follows

 var rowIndex = table.fnGetPosition( $(this).closest('tr')[0] ); var aData = table.fnGetData( rowIndex ); aData[2] = txt; //third column 

Here jsfiddle

And even a better solution would be to use fnUpdate to update data and display at the same time

Here jsfiddle

 // update column following here... var followingCell = $(this).parents('td').prev(); var txt = followingCell.text() == "1" ? "0" : "1"; var rowIndex = table.fnGetPosition( $(this).closest('tr')[0] ); table.fnUpdate( txt, rowIndex , 2); 

---

Also instead of us

 var followingCell = $(this).parents('td').prev(); var txt = followingCell.text() == "1" ? "0" : "1"; 

use

 var aData = table.fnGetData( rowIndex ); aData[2] //use it to check if the value is 0 or 1