Bootstrap Datatable Header не совпадает с содержимым тела в Modal [duplicate]

function format(notes) {
  var object = notes.data;
  var out = '<table class="display" style="font-size: 12px; min-width: 90%; margin-left: 90px; margin-bottom:10px; border-bottom:1px solid lightgray;">';
  out += '<thead><tr><th class="ui-state-default">Answer</th><th  class="ui-state-default"># of Answers</th>';
  out += '<th class="ui-state-default">Percent</th></tr></thead><tbody>';
  for (var i in object) {

    out += '<tr><td>' + object[i].Answer + '</td><td>' + object[i].NumberOfAnswers + '</td><td>' + object[i].Percent + '</td></tr>'
  }

  out += '</tbody></table>';
  return out;
}

$(document).ready(function() {
  // AJAX emulation for demonstration only
  $.mockjax({
    url: '/rmsicorp/clientsite/pacingModal/surveyajax2.php',
    responseTime: 200,
    responseText: {
      "data": [{
        "Answer": 1,
        "NumberOfAnswers": 2,
        "Percent": 3
      }, {
        "Answer": 1,
        "NumberOfAnswers": 2,
        "Percent": 3
      }, {
        "Answer": 1,
        "NumberOfAnswers": 2,
        "Percent": 3
      }]
    }
  });

  // AJAX emulation for demonstration only
  $.mockjax({
    url: '/rmsicorp/clientsite/pacingModal/surveyajax.php',
    responseTime: 200,
    responseText: {
      "data": [{
        "ID": 1,
        "Question": "Question"
      }, {
        "ID": 2,
        "Question": "Question"
      }, {
        "ID": 3,
        "Question": "Question"
      }]
    }
  });
  
  
  // AJAX emulation for demonstration only
  $.mockjax({
    url: '/rmsicorp/ClientSite/Reset/CategoryStatus/Detail/CatStatusDetailData.php',
    responseTime: 200,
    responseText: '<p class="text-center">No data</p>'
  });

  $('#btn-show').on('click', function() {
    var box = $('#PacingModal').modal();
  });

  $('#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",
        "type": "get"
      },
      "scrollY": "400px",
      "scrollCollapse": true,
      "paging": false,
      "bAutoWidth": true,
      "columns": [{
        "className": 'details-control',
        "orderable": false,
        "data": null,
        "defaultContent": ''
      }, {
        "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('hidden.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').DataTable().clear().destroy();
  });

  $('#ModalTabs a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    if ($(e.target).attr('href') === '#PacingModalSurvey') {
      $('#car').DataTable().columns.adjust();
    }
  });

});

<!DOCTYPE html>
<html>

<head>
  <meta charset="ISO-8859-1">

  <link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>

</head>

<body>
  <div class="container text-center">
    <button id="btn-show" class="btn btn-primary">Show Dialog</button>
  </div>

  <div id="PacingModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-xl">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 id="ModalTitle" class="modal-title">Modal</h4>
        </div>
        <div class="modal-body">
          <div role="tabpanel">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist" id="ModalTabs">
              <li role="presentation"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Category Details</a>
              </li>
              <li role="presentation"><a href="#PacingModalSurvey" aria-controls="Survey" role="tab" data-toggle="tab">Survey</a>
              </li>
              <li role="presentation"><a href="#PacingModalPhotos" aria-controls="Photos" role="tab" data-toggle="tab">Photos</a>
              </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
              <div role="tabpanel" class="tab-pane active" id="home">
                <p id="cat"></p>
                <div id="TablContainer">
                  <div id="cat2"></div>
                </div>
              </div>
              <div role="tabpanel" class="tab-pane" id="PacingModalSurvey">
                <p id="surveyP">
                </p>
                <div id="surveyDiv">
                  <table id="car" class="display" cellspacing="0" width="100%" style="font-size: 12px;">
                    <thead>
                      <tr>
                        <th class="details-control" style="max-width: 80px;">Expand</th>
                        <th>Question</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>

                    <tfoot>
                      <tr>
                        <th></th>
                        <th>Question</th>
                      </tr>
                    </tfoot>
                  </table>
                </div>



                <style>
                  td.details-control {
                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAACjElEQVR4Aa2V30uTURjHnVBUgglCaXVTJJVLMdhQm7+1JEvJiKAggmgSQiKJl0V0E13UVf0HQZmBLcvlpqa55tqV0YoMzIhY6js0yDH11X17vuO8Sq5Zgl/48DznPD/G63nOMSmBkoUNwhYhTUgn9NUeY8z5p0wqOVXYKRwQLMJhhYV7Kpaqck2rNdskbBPMdrv9osfjcQaDwW/RaHSR0OceY8xhrqox/a3ZZmGHkO9wOB7ouj6PBGKMOcxlzcqmdDYKGZmZmSWjo6PvIYosRuDWXGj50IwTb4+hxleN5sAVvJh4jvBCGBRzWSO121UPk3EAaUKuz+d7ycTp+Wnc/nwL1d4qHBVidmjZv/npBkJzGiiv19vFWmGrcVDsvKupqeky/056VMf1j9dQOViBKo9Aa/ixdbnYcrQGWsBc1jQ2NtrZQ/VKShHM8kvdEPVN9qJsoBRl/aUoHyiJ+UpcCxJTtmfCDYoHJT2yYyOlPtcaCoUmGGwdbkVRbxGK+2y0gg2GisUvNmJCy/BVUJqm/eBIxXqpgbUtiBise12HQlc+ClwFSKRCiZH6wXpQs7OzETWn6XENa/trYemywuK0IpGsTotgRU3fcVBzouWG6pOnpqY0BhuGGpDXeUjIW7JKcfuX3tjjP9k4FBkZN4PtY+042JGzzNMcGDJ35C7tmcU++tJmjE63OpSUuLEJ62GcfXUO+59kr8rJnlOY0WfAGtYaY/PHYPv9fhdEY7++4nz/BWS17UPWY0Es2avWp3vOYOTnCCheBtaqHskJr95kZBL3AvdR2XkEex5mYbdQ+qwCd97dRTAcXHn1Moyrt16PA2tN//V8jY+Pf4cS/VWerzU9sDay1gd2Xf4F/AZqlpeB9836LwAAAABJRU5ErkJggg==)
no-repeat center center;
                    cursor: pointer;
                  }
                  tr.shown td.details-control {
                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAACdUlEQVR4Aa2V30tTYRjHVSgsoQKhXPUPlKZMlImiIIg/pggiiDeCBAdqyC4Kf9zVhVdeelX33QnCbtYvxZsxxkoqKxiz1SzdFudMb5xO5/bt+fa+sPCw3IVf+PA+532e5ytn53lfK0qoSrggXBauCbUKxtxjjjVnq1IXXxFuCXeEFqGdMOYec6zRtZX/M6sWrgv1hmHcDwQCLxOJxM9CoZAnjLnHHGt0bbXdVG1cEm4KLp/P9yKXyx2jhJhjDWvZc9qUwUWhzuFwdMVisc8QFQ4PcbCygvT0NJLDw0gNDSH96DEyfj8KmQwo1rJHem8oD2VapX/sxlAo9Aqi/N4e9hYWsDMwgARxD2DH7ZZYren5eZxYFqhgMOhnr3BVeSnn216v98Hf3yqXg/X0CX719YFs9/WquJfPGtkzZ2fBWvZ4PB6DHtqrokaol7/0GqLM2hq2enpsxMmpvf3VVVD8UOJxV42Uet1Wy7J+M5mam8P37u6ySM7MgDJNM8mRUl5qYDtOREz+GB3FZlcXNjs7UUrMk/jYGKhsNnuo57TWZhgTw0hHO0EpRdpV/tvICKgjUdFQv/Lu7q7JZHxqCl9dLqGtSJtL4VJ80Wvc8xD2V9YfRUbmLZPp5WVstLTYaSWt+lmt1tISKH5Q/VFqbGOTl6GNTk7iQ3Oz4FSrU8UfuTqdBJHxceQz+2APe/8Zm+Jgh8PhNxBlt7YQNQysNzVivbEJ7wXGiiZEJiZwEI2C4mFgr/aoKnn0jk0TiWfPsTE4iHcN9xBuaMCn/n5sLy7iKJk8ffTqikfvfC4H9laWdX2lUqltaDEu9/o664LtIOVfsOf4L+APb5yaiwyN8+8AAAAASUVORK5CYII=)
 no-repeat center center;
                    cursor: pointer;
                  }
                </style>

              </div>
              <div role="tabpanel" class="tab-pane" id="PacingModalPhotos">


                <div class="container">



                  <div class="row" id="FullClass">
                    <div class="col-lg-12" style="padding-left: 0px !important; margin-bottom: 10px;">

                      <h5 style="vertical-align: middle; text-align: center; color: black; font-size: 16px; font-weight: bold; text-transform: uppercase;">Photos</h5>
                      <div id="SliderContainer2">
                      </div>
                      <div id="SelectContainer2">
                        <h5>Please search for photos.</h5>
                      </div>
                      <div id="LoadingContainer2" style="vertical-align: central; text-align: center;">
                        <img src="/images/Loading.gif" />
                        <br />

                        <span class="load">Loading...</span>
                      </div>
                    </div>
                  </div>



                </div>
              </div>
            </div>

            <p id="Loading" style="text-align: center; vertical-align: central;">
              <img src="/Images/Loading.gif" />
              <br />
              <span>Loading.</span>
            </p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>