點擊排序，從數據表中刪除數據。 Reactjs Javascript

我正在使用datatable進行反應。當我（在的tHead）排序點擊刪除所有數據，並表示表點擊排序，從數據表中刪除數據。 Reactjs Javascript

提供什麼，我覺得這裏沒有數據，是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() { 

    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> 

    ) 
    }

來源

2017-10-19 Noman Ali

側的問題是「我應該真正使用jQuery的陣營，共同打造我的DOM補充說：」 3秒延遲？答案是「否」。 – JulienD

我暫時解決了這個問題。

我在下面的函數

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

來源

2017-10-19 12:38:22

這意味着您將通過一個Ajax調用獲取數據，這個調用的執行時間少於3秒。不僅這個修補程序像人們想象的那麼醜陋，而且如果有一天需要3.1秒，表格將再次變空。 – JulienD

的確，我能理解。但目前還沒有其他解決方案。你能建議嗎？謝謝。 –

由於我們無法從上面的代碼中看到如何將prop數據傳遞給組件，因此沒有解釋爲什麼'this.props.data'變爲空。無論如何，修改變量的範圍肯定會有所幫助。刪除這些全球'employessData'和'thisclass'。 – JulienD

employessData的範圍很奇怪，所以它thisclass。

你會想在render要做到這一點，而不是：

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

，然後明白如果/爲什麼this.props.data該組件接收是空的（這是不可見的在這裏）。

來源

2017-10-19 12:35:05 JulienD

點擊排序，從數據表中刪除數據。 Reactjs Javascript

回答

相關問題