单击排序，从数据表中删除数据。 Reactjs Javascript

Question

我在反应中使用数据表。当我点击排序（在 tHead 中）时，它会删除所有数据并显示 table 中没有可用数据

我在这里的想法是，tbody 是在 Datatable 初始化之前呈现的。或类似的东西。

这是我在PasteBin中的代码

这是componentDidMount

的一些代码

componentDidMount(){
        employessData = thisclass.props.data;

        thisclass.setState({
            stateReady: true
        })
        var self = this;
        $('#mytableEmp').dataTable({
            "columnDefs": [
                { "width": "20px", "targets": 0 }
            ],
            "pagingType": "numbers",
            "bAutoWidth": false,
            "bDestroy": true,       
            "fnDrawCallback": function() {              
                self.forceUpdate();         
            }
        });
        $('#checkboxhead').removeAttr('area-sort').removeClass('sorting_asc');
        $(".checkAllCBEmp").click(function () {
            $('#mytableEmp tbody input[type="checkbox"]').prop('checked', this.checked);
        });

        $("#searchtabletb").on("keyup", function() {
            var value = $(this).val();
            value = value.toLowerCase();
            console.log(value);
            $("#mytableEmp tr").each(function(index) {
                if (index != 0) {
                    var row = $(this);

                    var id = row.find("td").text();
                    id = id.toLowerCase();
                    if (id.indexOf(value) === -1) {
                        $(this).hide();
                    }
                    else {
                        $(this).show();
                    }
                }
            });
        });
}

这是 render 函数的代码。

  render () {

    return (


                <table className="table table-stripped" id="mytableEmp">
                  <thead>
                    <tr className="table-head-row">
                      <th id="checkboxhead" className="firsttd">
                        <div className="round-cb">
                            <input type="checkbox" id="cb1_emp" className="checkAllCBEmp" />
                            <label htmlFor="cb1_emp"></label>
                        </div>
                      </th>
                      <th>Title</th>
                      <th>Type</th>
                      <th>Created on</th>
                      <th>From</th>
                      <th>To</th>
                      <th>Processed</th>
                      <th>Amount</th>
                      <th>Status</th>
                      <th id="detailarrowhead" className="lasttd"></th>
                    </tr>
                  </thead>
                  <tbody>
                  {
                    this.state.stateReady ? 
                        employessData.map((heading, index) => {
                        return(<tr role="row" className="tablerow" key={index}>
                          <td className="firsttd">
                            <div className="round-cb">
                                <input type="checkbox" value="cb1" id={heading.userId} />
                                <label htmlFor={heading.userId}></label>
                            </div>
                          </td>
                          <td>

                            <div className="emp-avatar">
                                <img src={heading.profile_picture} />
                            </div>

                            <div className="emp-title-div">
                             <div className="emp-title">
                               <div>
                                 {heading.name}
                               </div>
                             </div>
                           </div>
                          </td>
                          <td>c</td>
                          <td>Texto 2</td>
                          <td>Texto 2</td>
                          <td>Texto 2</td>
                          <td>Texto 2</td>
                          <td>Texto 2</td>
                          <td><span className="badge badge-red">Rejected</span></td>
                          <td className="lasttd"><Link to="/emp-profile" className="table-details-btn" onClick={() => {this.addlocalid(heading.userId)}}>View User</Link></td>
                        </tr>)
                    })
                    :
                    ""
                  }
                  /tbody>
                </table>

    )
  }

Answer 1

employessData 的范围很奇怪，所以它是thisclass。

您将希望在 render 中执行此操作：

let employessData = this.props.data;
this.state.stateReady ? 
    employessData.map(...);

然后了解该组件接收到的this.props.data 是否/为什么为空（此处不可见）。

Answer 2

我暂时已经解决了这个问题。

我在以下功能中添加了 3 秒的延迟

setTimeout(function(){    
$('#mytableEmp').dataTable({
                "columnDefs": [
                    { "width": "20px", "targets": 0 }
                ],
                "pagingType": "numbers",
                "bAutoWidth": false,
                "bDestroy": true,       
                "fnDrawCallback": function() {              
                    self.forceUpdate();         
                }
            });
}, 3000);