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

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

现在,最后的togglebutton发布到服务并在数据库中设置该记录的跟随状态.

但是,它还应该更新该行中的另一个单元格.
但是我确定我不应该通过jquery手动但通过数据表来做到这一点？

$('#tblFollow').dataTable({
    sDom: "t",aoColumns: [
      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:
现在我有一个例子,我手动更改字段,但这只是可视的,数据表仍然使用其内部数据进行排序.所以我正在寻找一种更好的方法

解决方法

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

除了代码之外,您还应该更新数据表数据,如下所示

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

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

解决方法

猜你在找的jQuery相关文章