如何在使用ajax動態創建時清除數據表？

Question

當我將數據插入表中時，它首次插入到數據表tbody中。下一次，當我改變數據tbody與數據表tbody。我想刪除我的代碼工作的數據表tbody。

<table frame="hsides" id="table"> 
     <thead> 
      <tr> 
       <th>Rules</th> 
      </tr> 
    </thead> 
</table> 


$.ajax({url: '../controllers/manage_rule_controller.php', 

    type: 'POST', 
    data: { "operation": "get_rule"}, 
    dataType:"json", 
     }, 

     success: function (data) { 
     keys = Object.keys(data); 
     var table = document.getElementById("table"); 
     $("#table").find("tr:not(:first)").remove(); 
     var tBody = document.createElement("tbody"); 
     table.appendChild(tBody); 

     for(i=0;i<keys.length;i++) 
     { 
      var row = tBody.insertRow(i); 
      var cell1 = row.insertCell(0); 
      cell1.innerHTML = "<div class='col-md-12 col-sm-12 col-xs-12 testdiv' id='fullrule"+keys[i]+"'><div style='border-bottom:1px solid #f2f2f2' class='col-md-10 col-sm-10 col-xs-8' id='rule"+keys[i]+"' onclick='updaterule(this)'>"+data[keys[i]]+" </div></div>" 

     } var dataTable = $('#table').DataTable(); 
    }, 
    }); 

Answer 1

它，因爲你正在使用table.appendChild（TBODY），這將追加新生成的HTML每次不超過寫。因此，嘗試使用html（）或在添加新的html之前清除舊的html。

Answer 2

呼喚你的Ajax和重繪你的數據表之前，

var dataTable = $('#table').DataTable(); 
dataTable.rows().remove().draw();