Question

我有一个react-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组件使用redux存储来呈现表。当我使用AddCustomerForm添加新客户时，我会更新Redux存储。这实际上会更改应用程序状态，因此我希望Datatable组件重新呈现，并在表中向我显示新客户。但是，这不会发生。如果我击中它会正确显示。

我知道React和jQuery Datatables都是独立管理DOM的，但是我确信必须有一种在可重现组件中使用Datatables的方法...

请帮助。

Answer 1

恐怕对于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();

Answer 2

您可以通过实现组件的“ 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仅包含表的ID

<table id="mytable">

如何在状态更改后重新呈现Datatable组件

2 个答案: