jquery datatables: mise à jour de cellule de tableau après un clic sur le bouton

nous avons une table dans notre page, avec quelques lignes et une coutume bouton bascule à la fin.
la table est chargée via le code html dans la page, et non via json.

maintenant, le togglebutton à la fin des messages à un service et définit le suivi de l'état de l'enregistrement dans la base de données.

toutefois, il convient également de faire une mise à jour vers une autre cellule de la ligne.
cependant, je suis sûr que je ne devrais pas faire cela via jquery manuellement mais par l'intermédiaire de tables de données?

$('#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;
});

manuel exemple:
maintenant, j'ai un exemple, où j'ai modifier manuellement les champs, mais c'est seulement visuel, le datatable utilise toujours ses intérieure de données pour le tri. Donc, je suis à la recherche d'un moyen de faire mieux

OriginalL'auteur Sander | 2012-11-30

  1. 14

    Voici une solution possible:

    En plus de votre code, vous devez mettre à jour les tables de données données suivantes

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

    Ici la jsfiddle

    Et même la meilleure solution serait d'utiliser fnUpdate de mettre à jour les données et de les afficher en même temps

    Ici la 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);

    Aussi au lieu de nous

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

    utilisation 

    var aData = table.fnGetData( rowIndex  );
aData[2] //use it to check if the value is 0 or 1
    qui fonctionne comme un charme. désolé de l'optimisation que vous avez fait à la fin, pour vérifier la valeur sur aData plutôt que sur le texte de la cellule, n'était pas nécessaire, mais intéressant. Je n'ai utilisé dans mon exemple jsFiddle... mon propre code connaissais déjà le texte de propriétés de données sur le bouton. mais je ne voulais pas compliquer le jsFiddle trop mutch. toujours aussi intéressant. merci.
    Attention, cette solution semble fonctionner seulement avec les tables de données. Dans les tables de données 1.10.7-je utiliser table.cell(targetCellSelector).data("new text").draw();.

    OriginalL'auteur Daniel