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

Question

I have looked at all the examples I can find but haven't found an answer to this.

I have a DataTables table which is loaded by PHP echos, after manipulating data from MySQL queries.

I now want to add child rows showing extra data, basically the same format type as the DataTables examples (http://datatables.net/examples/api/row_details.html)

I have modified the table by adding an extra <tr>, and have added the details-control class (Simplified code below)

<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>

The Javascript I have tried is below

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

This shows all the data correctly, but all the child are shown displayed when the table loads, and the on('click' doesn't work.

Looking at all the DataTables examples I can find all the data seems to be loaded by Javascript/AJAX. which is something I don't really want to do.

I assume there must be a Javasript fault, but this is a new area for me.