Datatable에서 행 데이터를 업데이트하는 방법은 무엇입니까?

Question

내 React 응용 프로그램에서 사용되는 Datatable의 행을 업데이트하려고합니다.

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

하지만 다른 행을 업데이 트하지 않으면 새로운 데이터가 내 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(); 
    }); 
}); 

, 그것은 우리의 프로젝트에서 일했다.