DataTables дочерние строки не отображаются должным образом при заполнении с помощью PHP ECHO

Question

Я просмотрел все примеры, которые могу найти, но не нашел ответа на этот вопрос.

У меня есть таблица DataTables, которая загружается PHP echos после манипулирования данными из запросов MySQL.

Теперь я хочу добавить дочерние строки, показывающие дополнительные данные, в основном того же типа формата, что и в примерах DataTables (http://datatables.net/examples/api/row_details.html)

Я изменил таблицу, добавив дополнительные <tr>,и добавили класс управления деталями (Упрощенный код ниже)

<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');
      }
  });
});

Это показывает все данные правильно, но все дочерние элементыотображается, когда таблица загружается, а кнопка «ВКЛ (щелчок)» не работает.

Глядя на все примеры из DataTables, я могу найти, что все данные, похоже, загружены Javascript / AJAX.Я не хочу этого делать.

Я предполагаю, что должен быть сбой Javasript, но для меня это новая область.