Datatableの行データを更新するには？

Question

Reactアプリケーションで使用されているDatatableの行を更新しようとしています。

私は、DataTableオブジェクトだけでなく、私のthis.state.myTableとthis.state.selectedとして、コンポーネントの状態を反応させるのに保存された選択行を保存します。

私は同様に、最初にデータテーブルオブジェクトを保存：

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

Iは行データを更新する（に従ってdocs）のように：

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

しかし、他の行を更新しない限り（この行のみが更新され、その行は更新されない限り）、新しいデータはDatatableに反映されません。

私はここで間違っていますか？

Answer 1

あなたの意見は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}); 
}, 

Answer 2

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

、それが私たちのプロジェクトで働いていました。