jquery datatables：點擊按鈕後更新表格單元

我們在頁面中有一個表格，最後有幾行和一個自定義切換按鈕。該表通過頁面中的html加載，而不是通過json。jquery datatables：點擊按鈕後更新表格單元

現在，末尾的togglebutton發佈到服務並在數據庫中設置該記錄的跟隨狀態。

但是，它也應該更新到該行中的另一個單元格。但是我敢肯定，我不應該通過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: 現在我有一個例子，其中，i手動更改的字段，但是這是唯一的視覺中，數據表仍使用其內的數據進行排序。所以我在尋找一種方式做的更好

來源

2012-11-30 Sander

這裏是一個可能的解決方案：

除了您的代碼應該更新數據表數據如下

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

來源

2012-12-03 12:00:36 Daniel

的作品就像一個魅力。對不起，你在最後做的優化，檢查aData上的值而不是單元格上的值，不是必要的，但很有趣。我只用它在我的例子jsFiddle ...我自己的代碼已經知道按鈕上的數據屬性的文本。但我不想讓jsFiddle變得太複雜。仍然很有趣。謝謝。 – Sander

請注意，此解決方案似乎只適用於傳統數據表。在dataTables 1.10.7中，我使用'table.cell（targetCellSelector）.data（「new text」）。draw（）;'。 –

jquery datatables：點擊按鈕後更新表格單元

回答

相關問題