Wie lösche Datentabelle, wenn dynamisch mit Ajax erstellt?

Question

Zum ersten Mal, wenn ich Daten in die Tabelle einfüge, wird sie in die Datentabelle tbody eingefügt. Das nächste Mal, wenn ich Daten ändere, werde ich mit Datatable tbody angesprochen. Ich möchte tbody von Datatable entfernen, damit mein Code funktioniert.

<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

seine deinetwegen table.appendChild (TBODY) verwenden, wird dies die neu generierten HTML jedes Mal schreiben nicht über anhängen. Versuchen Sie also, html() zu verwenden oder löschen Sie den alten HTML-Code, bevor Sie einen neuen hinzufügen.

Answer 2

Bevor Sie Ihre Ajax-Aufruf und Nachziehen Ihre Datentabelle,

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