更新行后,DataTable不会重新绘制

时间:2017-01-10 07:51:57

标签: javascript jquery datatables

我使用DataTables库创建了一个具有额外功能的表。我想要实现的是,用户可以选择行然后按一个按钮。这将调用服务器,做一些事情,行应该相应更新。

但是,在我完成对要更改的行的迭代并设置其值之后,重新绘制表并不会实际更新其值。我更新数据对象,使缓存无效并调用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();
});

1 个答案:

答案 0 :(得分: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,您可以获取单元格对象本身,并使用.data()修改内容。在您的版本中,您实际上并未获得特定的单元格对象,而只是将行的数据内容复制到变量中,并对其进行了修改。