使用PHP ECHO填充时，DataTables子行无法正确显示

Question

我看了所有可以找到的示例，但没有找到答案。

在处理来自MySQL查询的数据之后，我有一个DataTables表，该表由PHP回显加载。

我现在想添加显示额外数据的子行，其基本类型与DataTables示例（http://datatables.net/examples/api/row_details.html）相同

我通过添加额外的<tr>修改了表格，并添加了details-control类（下面的简化代码）

<tbody>
  <?php 
    while($fetch = $query->fetch_array()) {
      /*
      processing to build 15 variables used as data in main row <td>s
      and 8 variables used in the "hidden" rows
      */
      echo '<tr id = "parent">';
        echo '<td class="details-control"></td>';  /* taken from the DT example */
        echo '<td>'.$MainVariable.'</td>'; 
        /* repeated for all 15 of the main row variables */
      echo '</tr>';
      /* Now this should be the child row */
      echo '<tr id="child">';   
        echo '<td colspan="5">';
           echo 'Text: <b>'.$ChildVariable.'</b><br />';
           /* repeated for 6 of the child row variables */
        echo '</td>';

        echo '<td colspan="5">';
           echo 'Text: <b>'.$ChildVariable.'</b><br />';
           /* repeated for remaining 2 of the child row variables */
        echo '</td>';

        echo '<td colspan="5">';
           /* reserved for possibly more data */
        echo '</td>';
     echo '</tr>'; 
          }  
  ?>
</tbody>

我尝试过的Javascript如下

$(document).ready(function() {

// Add event listener for opening and closing details
  $('#attendtbl').on('click', 'td.details-control', function () {
      var tr = $(this).closest('tr');
      var row = table.row(tr);

      if (row.child.isShown()) {
          // This row is already open - close it
          row.child.hide();
          tr.removeClass('shown');
      } else {
          // Open this row
          row.child(format(tr.data('child-value'))).show();
          tr.addClass('shown');
      }
  });
});

这可以正确显示所有数据，但是在加载表时会显示所有子项，并且on（'click'不起作用。

查看所有DataTables示例，我可以发现所有数据似乎都是由Javascript / AJAX加载的。这是我真的不想做的事。

我认为一定有Javasript错误，但这对我来说是一个新领域。