如何更新 Datatable 中的行数据？答案

【问题标题】：How to update row data in Datatable?如何更新 Datatable 中的行数据？
【发布时间】：2016-10-07 06:34:11
【问题描述】：

我正在尝试更新我的 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));

我像这样更新行数据（根据docs）：

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

但新数据不会反映在我的数据表中，除非我更新了其他行（但只有这一行被更新，而不是那一行）。

我在这里做错了什么？

【问题讨论】：

标签： jquery reactjs datatable

【解决方案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();
    });
});

您可以使用此代码，它在我们的项目中有效。

【讨论】：

【解决方案2】：

只要有change in the state，您的视图就会re-render。因此，当您更新值时，只需使用 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});
},

【讨论】：