我们的页面中有一个表格,其中有几行,末尾有一个自定义切换按钮。 该表是通过页面中的 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: 现在我有一个例子,我手动更改字段,但这只是视觉效果,数据表仍然使用其内部数据进行排序。所以我正在寻找一种做得更好的方法
最佳答案
这是一个可能的解决方案:
除了代码之外,您还应该更新数据表数据,如下所示
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 数据表 : update table cell after button click,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13645668/