title: Sort-arrow in datatable appears more than once if destroy is set to true
body: <p>I need to reinitialize my datatable on every click of a submit button. I set <code>destroy : true</code> to achieve this. But every time the datatable re-initializes, the number of sort-arrows that appear for each column increases by one. How can I prevent this from happening? Here is my javascript code. Every time the user clicks on submit, processFormData is called, which calls initializeDataTable after validation of form fields.</p>
  
  <pre><code>var firstName = "";
  var lastName = "";
  var country = "";
  
  $(document).ready(function() {
      $('#userDetails').dataTable();
  });
  
  function processFormData() {
  
      firstName = document.userDetailsTable.firstName.value;
      lastName = document.userDetailsTable.lastName.value;
      country = document.userDetailsTable.country.value;
  
      if (document.userDetailsTable.firstName.value == ""
              || document.userDetailsTable.lastName.value == ""
              || document.userDetailsTable.country.value == "") {
          bootbox.alert("Please fill in all fields!");
      } else {
  
          initializeDataTable();
      }
      return false;
  }
  
  function initializeDataTable() {
  
      $('#userDetailsTable').dataTable({
                  "destroy" : true,
          "pageLength" : 12,
          "processing" : true,
          "serverSide" : true,
          "ajax" : {
              "url" : '/fetchSearchResults',
              "type" : 'POST',
              "data" : {
                  "length" : 12,
                  "formFirstName" : firstName,
                  "formLastName" : lastName,
                  "formCountry" : country
              }
          }
      });
  
  };
  </code></pre>