Как получить компоненты Datatable, отображаемые при изменении состояния

Question

У меня есть приложениеact-redux, которое имеет следующую структуру кода, которая работает правильно.

class Customers extends Component{
  state = {
    showAddCustomerForm : false
  }
  toggleAddCustomerForm = ()=>{
    this.setState({showAddCustomerForm: !this.state.showAddCustomerForm})
  }
  render(){
    return (
      <Fragment>
<AddCustomerForm />
                    <Datatable
                      options={{
                        data: this.props.customers,
                        buttons: [
                          {
                            extend: 'csv',
                            text: '<i class="fa fa-file-excel-o"></i>Excel'
                          },
                          {
                            text: 'Add Customer',
                            action: this.toggleAddCustomerForm
                          }
                        ],
                        columns: [
                          { data: "name" },
                          { data: "email" },
                          { data: "mobile", "defaultContent": "<i>Not set</i>" },
                          { data: "landline", "defaultContent": "<i>Not set</i>"}
                        ]
                      }}
                      filter="true"
                      className="table table-striped table-bordered"
                      width="100%"
                    />
      </Fragment>
)
}
}

Компонент Datatable использует рендеринг хранилища для рендеринга таблицы. Когда я добавляю нового клиента с помощью AddCustomerForm, я обновляю магазин Redux. Это на самом деле меняет состояние приложения, поэтому я ожидаю, что компонент Datatable Component будет повторно визуализирован и покажет мне нового клиента в таблице. Однако этого не происходит. Если я ударю, это показывает меня правильно.

Я понимаю, что и React, и jQuery Datatables управляют DOM независимо, но я уверен, что должен быть способ использовать datatables в восстанавливаемом компоненте ...

Пожалуйста, помогите ..

Answer 1

Вы можете обновить datatable путем реализации функции componentDidUpdate вашего компонента.Пример:

componentDidUpdate=()=>{
    //console.log("Component did update");
    if (this.props.customers.length>0){
          this.createTable()
          this.updateTable();
    }


};

Затем реализуйте функцию обновления данных.Например,

updateTable=()=>{
    let table=$('#mytable').DataTable();

    table.clear();
    table.rows.add(this.props.consumers).draw();

}

Я бы также создал таблицу, используя javascript, а не в JSX.Таким образом, вы можете уничтожить таблицу и создавать ее заново каждый раз, когда вы хотите обновить

createTable=()=>{

  if ( $.fn.DataTable.isDataTable( '#mytable' ) ) {
    $('#mytable').DataTable().destroy();
  }

 let table=$('#mytable').DataTable({

      "columns":columns,

  });

. И JSX будет содержать только идентификатор таблицы

<table id="mytable">

Answer 2

Боюсь, что для таблиц данных, подаваемых из источника HTML или JavaScript, нет способа повторно отобразить данные при изменении исходных данных.

Однако это довольно хорошие новости с точки зрения согласованности данных во всехнесколько клиентов, которые могут использовать ваше приложение одновременно.Для этого вы можете использовать AJAX-запросы для обновления внутренних данных, на которые ссылаются все пользователи, и, после успешного обновления, выдать ajax.reload() для синхронизации вашего клиента с серверной частью.

Если по какой-то причине вам может потребоваться обновить данные в локальном режиме, вы можете рассмотреть возможность очистки содержимого таблицы и повторного заполнения ее данными, например:

//datatable initialization
var datatable = $('#mytable').DataTable({
        data: myDataArray
    });
//source data modification
myDataArray.push({
    attr1: "value",
    attr2: "value"...
});
//purge datatable contents
datatable.clear();
//re-populate datatable
$.each(myDataArray, function () {
    datatable.row().add(this);
});
//re-render up to date datatable
datatable.draw();