jquery 数据表:单击按钮后更新表格单元格 [英] jquery datatables: update table cell after button click

问题描述

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

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.

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

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

推荐答案

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

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

这里是 jsfiddle

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

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

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

使用

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

这篇关于jquery 数据表:单击按钮后更新表格单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！