DataTables row.child не показывает содержимое

Question

Итак, я работал с DataTables и теперь пытаюсь использовать его функциональность row.child для отображения некоторых данных в дочерней строке родительской строки, когда она развернута.

Однако, когда я раскрываю строку,данные не отображаются.

Вот мой код.

<table id="dashNumTable" class="display table dashNumTable" style="width:100%">
                  <thead>
                      <tr>
                        <th></th>
                        <th><label class='control-label'>Dash </label></th>
                        <th><label class='control-label'>Wafer</label></th>
                        <th><label class='control-label'> Process</label></th>
                        <th><label class='control-label'>HGA </label></th>
                        <th><label class='control-label'> Description</label></th>
                        <th><label class='control-label'>TX</label></th>
                        <th><label class='control-label'>TR</label></th>
                        <th><label class='control-label'>Spec</label></th>
                      </tr>
                  </thead>
                    <tbody id="NGInsert">


                    </tbody>                 
              </table>

Вот мой JS.Я получаю строки внутри tbody динамически через ajax, который возвращает JSON.

for(var i = 0; i< gridValues.length; i++){
                var obj = gridValues[i];
                //
                //generate grid here based on values received as gridValues
                var initial = "<tr>";
                var finalReturn = "";
                var end = "</tr>";
                var middleContent = "";

                //
                middleContent += "<td  class='details-control'></td>"
                middleContent += "<td>"+obj.DIGIT+"</td>";
                middleContent += "<td>"+obj.W+"</td>";
                middleContent += "<td>"+obj.S+"</td>";
                middleContent += "<td>"+obj.H+"</td>";
                middleContent += "<td>"+obj.AW+"</td>";
                middleContent += "<td>"+obj.SAA+"</td>";
                middleContent += "<td>"+obj.FDS+"</td>";
                middleContent += "<td>"+obj.DDS+"</td>";

                //  ..generate final content now
                finalReturn= initial+middleContent+end;

                //push to table now
                $("#NGInsert").append(finalReturn);
                //end
}//end loop



function format () {
    // `d` is the original data object for the row
    subTableHeader = '<table cellpadding="0" cellspacing="0" class="innerDataTbl">'+
        '<tr class="shown">'+
            '<th>Dash No.</th>'+
            '<th>Heads</th>'+
            '<th>Col 3</th>'+
            '<th>Col 4</th>'+
            '<th>Col 5</th>'+
            '<th>Col 6</th>'+
            '<th>Col 1</th>'+
            '<th>Col 2</th>'+
            '<th>Col 3</th>'+
            '<th>Col 4</th>'+
            '<th>Col 5</th>'+
            '<th>Col 6</th>'+
        '</tr>'+
        '<tr>'+
            '<td>ON0, ON1</td>'+
            '<td>Up, Dn</td>'+
            '<td><input type="checkbox"/></td>'+
            '<td><input type="checkbox"/></td>'+
            '<td><input type="checkbox"/></td>'+
            '<td><input type="checkbox"/></td>'+
            '<td><input type="checkbox"/></td>'+
            '<td><input type="checkbox"/></td>'+
            '<td><input type="checkbox"/></td>'+
            '<td><input type="checkbox"/></td>'+
            '<td><input type="checkbox"/></td>'+
            '<td><input type="checkbox"/></td>'+
            '<td><input type="checkbox"/></td>'+
            '<td><input type="checkbox"/></td>'+
            '<td><input type="checkbox"/></td>'+
            '<td><input type="checkbox"/></td>'+
            '<td><input type="checkbox"/></td>'+
          '</tr>'+

    '</table>';
}


var table = $('#dashNumTable').DataTable();



// Add event listener for opening and closing details
    $('#dashNumTable tbody').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(row.data()) ).show();
            tr.addClass('shown');
        }
    } );

Что я здесь не так делаю?Любая помощь будет оценена.