title: How to restart a DataTable created with an append in JQuery?
body: <p>I have an issue at restarting my datatable, when I fill my datatable according a web service results, and it fills correctly but at the moment to make a research by clicking the (Search Button) again the datatable contains the old header and it shows the results but the function does not include the results into the DataTable and it shows 1 to 1 of 1 entries, which is correspondence to old searching. </p>
  
  <p>This is my JavaScript: </p>
  
  <pre><code>$.ajax({
                  type: 'POST',
                  url: '/enrollment.asmx/MethodSearch',
                  data: "{ 'esiidVal': " + $("#esiID").val() + "}",
                  contentType: "application/json; utf-8",
                  dataType: "json",
                  success: function (data) {
                      $("#loadingDiv").hide();
  
                      //$("#data").append("&lt;table id='tbSearch' class='table table-hover display'&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;City&lt;/th&gt;&lt;th&gt;Zip&lt;/th&gt;&lt;th&gt;Address&lt;/th&gt;&lt;th&gt;State&lt;/th&gt;&lt;th&gt;Location ID&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr id='" + data.d.City + data.d.Zip + data.d.Adds + "'&gt;&lt;td id='" + data.d.City + data.d.Zip + data.d.Adds + "/city'&gt;" + data.d.City + "&lt;/td&gt;&lt;td id='" + data.d.City + data.d.Zip + data.d.Adds + "/zip'&gt;" + data.d.Zip + "&lt;/td&gt;&lt;td id='" + data.d.City + data.d.Zip + data.d.Adds + "/adds'&gt;" + data.d.Adds + "&lt;/td&gt;&lt;td id='" + data.d.City + data.d.Zip + data.d.Adds + "/state'&gt;" + data.d.State + "&lt;/td&gt;&lt;td id='" + data.d.City + data.d.Zip + data.d.Adds + "/location'&gt;" + data.d.SNumer + "&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;");
                      $("#db").append("&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Selection&lt;/th&gt;&lt;th&gt;City&lt;/th&gt;&lt;th&gt;Zip&lt;/th&gt;&lt;th&gt;Address&lt;/th&gt;&lt;th&gt;State&lt;/th&gt;&lt;th&gt;ESIID&lt;/th&gt;&lt;th&gt;Utility&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr id='" + data.d.City + data.d.Zip + data.d.Adds + "'&gt;&lt;td&gt;&lt;input type='checkbox' name='userinformation' value='#'&gt;&lt;/td&gt;&lt;td id='" + data.d.City + data.d.Zip + data.d.Adds + "/city'&gt;" + data.d.City + "&lt;/td&gt;&lt;td id='" + data.d.City + data.d.Zip + data.d.Adds + "/zip'&gt;" + data.d.Zip + "&lt;/td&gt;&lt;td id='" + data.d.City + data.d.Zip + data.d.Adds + "/adds'&gt;" + data.d.Adds + "&lt;/td&gt;&lt;td id='" + data.d.City + data.d.Zip + data.d.Adds + "/state'&gt;" + data.d.State + "&lt;/td&gt;&lt;td id='" + data.d.City + data.d.Zip + data.d.Adds + "/location'&gt;" + data.d.SNumer + "&lt;/td&gt;&lt;td id='" + data.d.City + data.d.Zip + data.d.Adds + "/utility'&gt;" + data.d.Utility + "&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;");
                      //var html = "&lt;thead&gt;&lt;tr&gt;&lt;th&gt;City&lt;/th&gt;&lt;th&gt;Zip&lt;/th&gt;&lt;th&gt;Address&lt;/th&gt;&lt;th&gt;State&lt;/th&gt;&lt;th&gt;ESIID&lt;/th&gt;&lt;th&gt;Utility&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;";
                      $('#db').DataTable();
  
                      $('#db').after($("checkbox").addClass('checkbox-primary'));
  
  
                  },
                  error: function (e) {
                      alert(JSON.stringify(e));
                      $("#divResult").html("Something Wrong.");
                  }
              });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/LsjZ3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LsjZ3.png" alt="enter image description here"></a></p>
  
  <p>I tried destroy(), didn't work, I also tried clean() didn't work. I have weeks facing this issue. Can somebody help me with my issue? </p>
  
  <p>Thanks in advance. </p>