DataTable在更新行后未重新绘制。

Question

我正在使用 DataTables 库创建一个带有额外功能的表。我想要实现的是，用户可以选择行并按下按钮。这将调用服务器，执行一些操作，然后相应地更新行。

但是，在迭代要更改的行并设置其值后，重新绘制表并没有实际更新其值。我更新了数据对象，使缓存无效，并调用了 table.draw()。这非常类似于此页面上的最后一个示例。

我已经创建了一个关于这个问题的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();
});

- Jaims

---

尝试使用"Destroy":true。 - Ivan Barayev

@IvanBarayev 很遗憾，似乎没有任何差别。 - Jaims

Answer 1

我从你的JsFiddle上fork并解决了问题。这是来自fiddle的相关代码片段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您可以获取单元格对象本身，并使用.data()修改其内容。在您的版本中，实际上并没有获取特定的单元格对象，而是将整行数据内容复制到一个变量中，并进行了修改。

- Paul Jerome Bordallo

---

我发现如果DataTable由这些数据支持，更新单元格本身有点奇怪。特别是因为他们文档中的示例也会编辑数据并重新绘制。但它解决了问题！谢谢 - Jaims