如何正确显示我的DataTables表？

Question

我已经使用AJAX创建了一个Datatables表，但是当我尝试呈现它时，<tr>内的<tbody>比<thead>中的短。

共有2页：第一个是表单和表格的标题，默认情况下是隐藏的。当用户单击搜索按钮时，它将显示标题并通过AJAX加载表主体。结果如下：

style.css

.outcomeResearchTable {
  z-index: 100;
  background-color: white;
  display: none;
}

.outcomeResearchTable th {
  /*padding:1.0rem; */
  width: 100px !important;
  /* border-bottom:1px solid lightgray; */
  background-color: #FFFFFF;
}

.outcomeResearchTable th:first-of-type {
  padding: 1rem;
  width: 80px !important;
}

.outcomeResearchTable th:last-of-type {
  padding: 1rem;
  width: 80px !important;
}

#OUTCOME_RESEARCH_TABLE thead {
  display: none;
}

.outcomeResearchTable td {
  padding: 1rem;
  width: 100px;
}

.outcomeResearchTable td:first-of-type {
  padding: 1rem;
  width: 80px !important;
}

.outcomeResearchTable td:last-of-type {
  padding: 1rem;
  width: 80px !important;
}

page1.php

<td colspan="2">
  <button class="btn btn-primary" onclick="assetSearch();" tabindex="4">Ricerca</button>
  <?php
    echo "<table id=\"OUTCOME_RESEARCH_TABLE\"  class=\"display outcomeResearchTable\" cellspacing=\"0\" width=\"100%\">\n";
      echo "<thead>\n";
        echo "<tr>\n";
          echo "<th>IDConfig</th>\n";
          echo "<th>Nome</th>\n";
          echo "<th>Tipo</th>\n";
          echo "<th>Stato</th>\n";
          echo "<th>Ambiente</th>\n";
          echo "<th>Aggregatore</th>\n";
          echo "<th>Locazione</th>\n";
          echo "<th>Modello</th>\n";
          echo "<th>Contratto</th>\n";
          echo "<th>Valida Dal</th>\n";
          echo "<th>Valida Al</th>\n";
          echo "<th>Dettagli</th>\n";
        echo "</tr>\n";
      echo "</thead>\n";
    echo "</table><br />\n";
  ?>
</td>

assePageScript.js

function assetSearch() {
  var validation = checkForSelectedFields();

  if (validation == "KO") {
    return;
  }

  var arrForm = [];

  arrForm.push(document.getElementById("name").value); // 0
  //arrForm.push(document.getElementById("idConfig").value);
  arrForm.push(document.getElementById("serialNumber").value); // 1
  arrForm.push(document.getElementById("tipo").value); // 2
  arrForm.push(document.getElementById("ambiente").value); // 3
  arrForm.push(document.getElementById("modello").value); // 4
  arrForm.push(document.getElementById("locazione").value); // 5
  arrForm.push(document.getElementById("vendor").value); // 6
  arrForm.push(document.getElementById("gruppo").value); // 7
  arrForm.push(document.getElementById("stato").value); // 8
  arrForm.push(document.getElementById("classe").value); // 9
  arrForm.push(document.getElementById("securityLevel").value); // 10
  arrForm.push(document.getElementById("aggregatore").value); // 11

  $.ajax({
    url: "asset_GestAsset.php",
    type: "POST",
    data: {
      "fieldValue": JSON.stringify(arrForm)
    },
    success: function(data) {
      var outcomeResearchTable = document.getElementById("OUTCOME_RESEARCH_TABLE");

      outcomeResearchTable.style.display = "flex";

      var outComeRT = $('#OUTCOME_RESEARCH_TABLE').DataTable({
        paging: true,
        "bAutoWidth": false,
        "dom": 'ltipr',
        "data": data,
        "destroy": true,
        "pageLength": 100,
        "scrollY": 400,
        "scrollX": true,
        "ordering": true
      });
    },
    error: function(err) {
      alert("Errore " + err);
    }
  });
}