jquery datatables: update table cell after button click

datatables, jquery, sorting

Solution

Here is a possible solution:

In addition to your code you should update the datatables data as following

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

Here the jsfiddle

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

Here the 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

Problem

we have a table in our page, with a few rows and a custom toggle button at the end. the table is loaded via html in the page, not via json. now, the togglebutton at the end posts to a service and sets the follow state of that record in the database. however, it should also make an update to another cell in that row. however i'm sure i should not do this via jquery manually but via 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; }); ``` manual example: now i have an example, where i change the fields manually, but that's only visual, the datatable still uses its inner data for sorting. So i'm looking for a way to do it better

Original source