jquery datatables：单击按钮后更新表格单元格答案

【问题标题】：jquery datatables: update table cell after button clickjquery datatables：单击按钮后更新表格单元格
【发布时间】：2012-11-18 16:48:35
【问题描述】：

我们的页面中有一个表格，有几行，最后有一个自定义切换按钮。表格是通过页面中的 html 加载的，而不是通过 json 加载的。

现在，最后的切换按钮发布到服务并设置数据库中该记录的关注状态。

但是，它还应该更新该行中的另一个单元格。但是我确定我不应该通过 jquery 手动执行此操作，而是通过数据表执行此操作？

$('#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: 现在我有一个例子，我手动更改字段，但这只是视觉效果，数据表仍然使用其内部数据进行排序。所以我正在寻找一种更好的方法

【问题讨论】：

标签： jquery sorting datatables

【解决方案1】：

这是一个可能的解决方案：

除了您的代码之外，您还应该按以下方式更新数据表数据

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

这里是jsfiddle

更好的解决方案是使用fnUpdate同时更新数据和显示

这里是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);

也代替我们

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

使用

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

【讨论】：

这就像一个魅力。抱歉，您最后所做的优化是检查 aData 而不是单元格文本上的值，这不是必需的，但很有趣。我只在我的示例 jsFiddle 中使用了它......我自己的代码已经知道按钮上数据属性中的文本。但我不想让 jsFiddle 过于复杂。还是很有趣的。谢谢。
注意，这个解决方案似乎只适用于遗留数据表。在 dataTables 1.10.7 中，我使用 table.cell(targetCellSelector).data("new text").draw();。