如何在Datatable中更新行数据？

Question

我正在尝试更新React应用程序中使用的Datatable中的一行。

我将Datatable对象以及保存在React组件状态下的选定行保存为this.state.myTable和this.state.selected。

我最初是这样保存Datatable对象的：

var myTable = $('#myTable').DataTable({ ... });

this.setState({ myTable: myTable });

我在行点击事件中保存所选行，代码如下：

$('#myTable tbody').on('click', 'tr', function () {
    $(this).toggleClass('selected');
}).on('click', 'tr', function () {
    this.setState({ selected: this.state.myTable.rows('.selected') });
}.bind(this));

根据文档，我这样更新行数据：

function (newValue) {
    var data = this.state.selected.row().data();
    data.someValue = newValue
    this.state.selected.row().data(data).draw();
},

但是除非我更新其他行（但这样只会更新该行而不是那行），否则我的Datatable中不反映新数据。

我做错了什么？

- Anubhav Dhawan

Answer 1

$(document).ready(function () {
   $('#dataTable').on('click', '.update', function () {
        var tableRow = $('#dataTable').row($(this).parents('tr'));
        var rData = [
            test1,
            test1,
            '<a href="#" data-href="' + response.result[0].id + '" class="update">Update</a>',
            '<a href="#" data-href="' + response.result[0].id + '" class="delete">Delete</a>'
        ];
        $('#dataTable')
                .row( tableRow )
                .data(rData)
                .draw();
    });
});

你可以使用这段代码，在我们的项目中它是有效的。

- Vahap Gencdal

Answer 2

当状态发生变化时，你的视图将会进行重新渲染。因此，在更新值时，只需使用 setState 而不是直接修改状态。

function (newValue) {
    var dataType = {...this.state.selected};
    var data = dataType.row().data();
    data.someValue = newValue
    dataType.row().data(data).draw();
    this.setState({selected: dataType});
},

- Shubham Khatri