Question

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

我将我的React组件状态中保存的Datatable对象以及选定的行保存为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();
},

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

我在这里做错了什么？

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();
    });
});

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

Answer 2

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

如何在Datatable中更新行数据？

2 个答案: