Блог

Я пытаюсь обновить строку в Datatable, используемую в моем приложении React.

Я сохраняю объект 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();
},
  

Но новые данные не отражаются в моей таблице данных, если я не обновлю какую-либо другую строку (но тогда обновляется только эта строка, а не эта строка).

Что я здесь делаю не так?

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

Вы можете использовать этот код, он работал в наших проектах.

Ваше представление будет 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});
},