title: Datatables Column Misalignment and Duplicate sort arrow issue
body: <p>Each time I display my table I get an additional sort arrow added to the <code>&lt;th&gt;</code>.</p>
  
  <p>Here is an image of the issue: 
  <img src="https://i.imgur.com/AYefW5d.jpg" alt="issue 1"></p>
  
  <p>I also am having an issue with my columns not aligning correctly. it only happens sometimes, other times it works fine. If I click/sort the table, the columns snap align correctly. Here is the image link of that issue: 
  <img src="https://i.imgur.com/1tjASS7.jpg" alt="issue 2"></p>
  
  <p>I have to reinitialize the table each time with different data, so I have this:</p>
  
  <pre><code>$('#car').empty();
  table2.clear().draw();
  </code></pre>
  
  <p>If you know of a better way to completely destroy the and recreate it please let me know. i think this may be causing the column alignment issue.</p>
  
  <p>Here is the Javascript code.</p>
  
  <pre><code>function format(notes) {
      var object = notes.data;
      var out = '&lt;table id="display" style="font-size: 12px; min-width: 90%; margin-left: 90px; margin-bottom:10px; border-bottom:1px solid lightgray;"&gt;';
      out += '&lt;thead&gt;&lt;tr&gt;&lt;th class="ui-state-default"&gt;Answer&lt;/th&gt;&lt;th  class="ui-state-default"&gt;# of Answers&lt;/th&gt;';
      out += '&lt;th class="ui-state-default"&gt;Percent&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;';
      for (var i in object) {
  
          out += '&lt;tr&gt;&lt;td&gt;' + object[i].Answer + '&lt;/td&gt;&lt;td&gt;' + object[i].NumberOfAnswers + '&lt;/td&gt;&lt;td&gt;' + object[i].Percent + '&lt;/td&gt;&lt;/tr&gt;'
      }
  
      out += '&lt;/tbody&gt;&lt;/table&gt;';
      return out;
  }
  
  $('#PacingModal').on('shown.bs.modal', function (e) {
      var cat = $("#PacingModal").attr('category');
      var status = $("#PacingModal").attr('status');
      var taskid = $("#PacingModal").attr('taskid');
  
      //Fill the category Details table
      $.ajax({
  
          type: "POST",
          cache: false,
          dataType: 'text',
          url: '/rmsicorp/ClientSite/Reset/CategoryStatus/Detail/CatStatusDetailData.php',
          data: { category: cat, statustype: status, taskid: taskid },
          beforeSend: function () {
              $('#Loading').show();
              $('#SelectContainer2').empty();
          },
          success: function (data) {
              $("#cat2").html(data);
              $('#Loading').hide();
          },
          complete: function (data) {
  
              var table = $("#cat2").find("#tabl").DataTable({
                  "scrollY": "400px",
                  "scrollCollapse": true,
                  "paging": false,
                  "bAutoWidth": false,
                  "jQueryUI": true,
                  "order": [[5, "asc"]],
                  "TableTools": {
                      "sSwfPath": "/swf/copy_csv_xls_pdf.swf",
                      "aButtons": [
                          {
                              "sExtends": "xls",
                              "sButtonText": "Excel HEY!",
                              "sFileName": "*.xls"
                          },
                      ]
                  }
              });
  
          },
          error: function () {
              //TODO - Add auto email for error
              alert("Error retriving the data from the server! Please check back soon.");
              //Close modal if error
              $("#PacingModal").modal('hide');
          }
      });
  
  
  
  
  
      var TaskID = $('#PacingModal').attr('taskid');
      //var QuestionID = table2.cell('.shown', 0).data();
      var table2 = $('#car').DataTable({
          destroy: true,
          "ajax": {
              "url": "/rmsicorp/clientsite/pacingModal/surveyajax.php?TaskID=" + TaskID,
              "type": "get"
          },
          "scrollY": "400px",
          "paging": false,
          "bAutoWidth": true,
          "columns": [
              {
                  "className": 'details-control',
                  "orderable": false,
                  "data": null,
                  "defaultContent": ''
              },
              {
                  "data": "ID",
                  "type": "hidden"
              },
               { "data": "Question" },
          ],
  
      });
  
  
      var detailsrows = [];
      $('#car tbody').on('click', 'td.details-control', function () {
          var TaskID = $('#PacingModal').attr('taskid');
          var tr = $(this).closest('tr');
          var row = table2.row(tr);
          var cell = row.data();
          var RowID = cell.ID;
          var RID = $.inArray(tr.attr('id'), detailsrows);
          $.ajax({
              type: 'post',
              url: '/rmsicorp/clientsite/pacingModal/surveyajax2.php',
              data: { TaskID: TaskID, QuestionID: RowID },
              dataType: 'json',
              success: function (result) {
                  if (row.child.isShown()) {
                      row.child.hide();
                      tr.removeClass('shown');
                      detailsrows.splice(RID, 1);
                  }
                  else {
                      // console.log(result);
                      row.child(format(result)).show();
                      tr.addClass('shown');
  
                      if (RID === -1) {
                          detailsrows.push(tr.attr('id'));
                      }
  
                  }
              }
          });
      });
  
      $("#PacingModal").on('hide.bs.modal', function () {
          //empty html content out of div so the user does not see the last search before the new one loads when they click on a different option
          $('#cat2').empty();
          $('#SliderContainer2').empty();
          $('#car').empty();
          table2.clear().draw();
  
      });
  
  });
  </code></pre>
  
  <p>And here is the html. Both datatables are inside bootstrap tabs inside a bootstrap modal.</p>
  
  <pre><code>&lt;div id="PacingModal" class="modal fade" role="dialog"&gt;
      &lt;div class="modal-dialog modal-xl"&gt;
          &lt;!-- Modal content--&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 id="ModalTitle" class="modal-title"&gt;Modal&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;div role="tabpanel"&gt;
                      &lt;!-- Nav tabs --&gt;
                      &lt;ul class="nav nav-tabs" role="tablist" id="ModalTabs"&gt;
                          &lt;li role="presentation"&gt;&lt;a href="#home" aria-controls="home" role="tab" data-toggle="tab"&gt;Category Details&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a href="#PacingModalSurvey" aria-controls="Survey" role="tab" data-toggle="tab"&gt;Survey&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a href="#PacingModalPhotos" aria-controls="Photos" role="tab" data-toggle="tab"&gt;Photos&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;!-- Tab panes --&gt;
                      &lt;div class="tab-content"&gt;
                          &lt;div role="tabpanel" class="tab-pane active" id="home"&gt;
                              &lt;p id="cat"&gt;&lt;/p&gt;
                              &lt;div id="TablContainer"&gt;
                                  &lt;div id="cat2"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div role="tabpanel" class="tab-pane" id="PacingModalSurvey"&gt;
                              &lt;p id="surveyP"&gt;
                              &lt;/p&gt;
                              &lt;div id="surveyDiv"&gt;
                                  &lt;table id="car" class="display" cellspacing="0" width="100%" style="font-size: 12px;"&gt;
                                      &lt;thead&gt;
                                          &lt;tr&gt;
                                              &lt;th class="details-control" style="max-width: 80px;"&gt;Expand&lt;/th&gt;
                                              &lt;th&gt;ID&lt;/th&gt;
                                              &lt;th&gt;Question&lt;/th&gt;
                                              &lt;!-- &lt;th&gt;NumberOfAnswers&lt;/th&gt;
                                              &lt;th&gt;Answer&lt;/th&gt;
                                              &lt;th&gt;Percent&lt;/th&gt;--&gt;
                                          &lt;/tr&gt;
                                      &lt;/thead&gt;
                                      &lt;tbody&gt;
                                      &lt;/tbody&gt;
  
                                      &lt;tfoot&gt;
                                          &lt;tr&gt;
                                              &lt;th&gt;&lt;/th&gt;
                                              &lt;th&gt;ID&lt;/th&gt;
                                              &lt;th&gt;Question&lt;/th&gt;
                                              &lt;!--   &lt;th&gt;NumberOfAnswers&lt;/th&gt;
                                              &lt;th&gt;Answer&lt;/th&gt;
                                              &lt;th&gt;Percent&lt;/th&gt;--&gt;
                                          &lt;/tr&gt;
                                      &lt;/tfoot&gt;
                                  &lt;/table&gt;
                              &lt;/div&gt;
  
  
  
                              &lt;style&gt;
                                  td.details-control {
                                      background: url('/rmsicorp/clientsite/images/details_open.png') no-repeat center center;
                                      cursor: pointer;
                                  }
  
                                  tr.shown td.details-control {
                                      background: url('/rmsicorp/clientsite/images/details_close.png') no-repeat center center;
                                      cursor: pointer;
                                  }
                              &lt;/style&gt;
  
                          &lt;/div&gt;
                          &lt;div role="tabpanel" class="tab-pane" id="PacingModalPhotos"&gt;
  
  
                              &lt;div class="container"&gt;
  
  
  
                                  &lt;div class="row" id="FullClass"&gt;
                                      &lt;div class="col-lg-12" style="padding-left: 0px !important; margin-bottom: 10px;"&gt;
  
                                          &lt;h5 style="vertical-align: middle; text-align: center; color: black; font-size: 16px; font-weight: bold; text-transform: uppercase;"&gt;Photos&lt;/h5&gt;
                                          &lt;div id="SliderContainer2"&gt;
                                          &lt;/div&gt;
                                          &lt;div id="SelectContainer2"&gt;
                                              &lt;h5&gt;Please search for photos.&lt;/h5&gt;
                                          &lt;/div&gt;
                                          &lt;div id="LoadingContainer2" style="vertical-align: central; text-align: center;"&gt;
                                              &lt;img src="/images/Loading.gif" /&gt;&lt;br /&gt;
  
                                              &lt;span class="load"&gt;Loading...&lt;/span&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
  
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;p id="Loading" style="text-align: center; vertical-align: central;"&gt;
                          &lt;img src="/Images/Loading.gif" /&gt;
                          &lt;br /&gt;
                          &lt;span&gt;Loading.&lt;/span&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-primary" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>