2017-01-10 135 views
1

我正在使用DataTables庫創建具有額外功能的表。我想實現的是,用戶可以選擇行,然後按下按鈕。這將調用服務器,做一些事情,行應該相應地更新。更新行後DataTable不會重新繪製

但是,在完成對要更改的行進行迭代並設置其值後,重新繪製表格並不實際更新其值。我更新數據對象,使緩存無效並致電table.draw()。這與this page上的最後一個例子非常相似。

我已創建JSFiddle此問題。該按鈕更新所選行的日期對象,並重新繪製表格,但表格中的數據未更新。核心JS代碼:

$('#updateRow').click(function() { 
    //Get the table 
    var table = $('#example').DataTable(); 
    //Iterate over selected rows 
    var rowData = table.rows({ 
     selected: true 
    }).every(function() { 
     //For every selected row, update startDate 
     var d = this.data(); 
     d.startDate = "01/01/2017"; 
     console.log('Set startDate of ' + d.name + ' to ' + d.startDate); 
     //Invalidate the cache 
     this.invalidate(); 
    }); 
    //Re-draw the table 
    table.draw(); 
}); 
+0

嘗試使用「Destroy」:true –

+0

@IvanBarayev似乎沒有什麼區別可悲 – Jaims

回答

1

我分叉並從您的JsFiddle做了解決方案。下面是從小提琴https://jsfiddle.net/k38r9be5/1/

var rowData = table.rows({ 
    selected: true 
}).every(function(rowIdx) { 
    var colIdx = 4; // startDate is the fifth column, or "4" from 0-base (0,1,2,3,4...) 
    table.cell(rowIdx, colIdx).data('01/01/2017').draw(); 
}); 

基本上相關的片段,通過API,你可以得到的細胞對象本身,並與。數據修改的內容()。在你的版本中,你實際上並沒有獲得特定的單元格對象,而只是將該行的數據內容複製到一個變量中,並對其進行了修改。

+0

我發現如果數據表由所述數據支持,更新單元本身有點奇怪。特別是因爲他們的文檔中的示例還編輯數據並重新繪製。但它解決了這個問題!謝謝 – Jaims