Nested table never initializes

solowookie1791

I am passing a unique value from the parent table to the child row, then trying to initialize / pull the child row as it is expanded. I am getting the row to expand, the header to display, but the table never initializes. The server request is never made. I have followed the examples and debugging does not flag any errors in the code. I'm not sure how to translate this project to JSFiddle etc.

<

script>

var pAPI;
var detailsTableHtml;
var oInnerTable;
function comptable2Out(table_id, html) {
    
    var sOut = "<table id=\"#comptable2_"+pAPI + "\">";
    sOut += html;
    sOut += "</table>";
    $("#comptable2_"+pAPI).css("display", "inline");
    return sOut;
}
$(document).ready(function(){ 

    detailsTableHtml = $("#comptable2").html();
    var table = $('#comptable1').DataTable( {
        "ajax": {
            "type": "post",
            "url": "getcompletion.php",
            "dataType": "json"
        }
      //column details  here
    } );
    
    $('#comptable1 tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            var rowData = row.data();
            pAPI = rowData.api;
            row.child(comptable2Out(pAPI, detailsTableHtml)).show();
            tr.addClass('shown');
            var oInnerTable = $('#comptable2_'+pAPI).DataTable( {
                "ajax": {
                    "type": "post",
                    "url": "getcompletionext.php?api="+pAPI,
                    "dataType": "json"
                },
                //column details here
            } );
        }
    } );
});

solowookie1791

Got this working, modified as such;

var pAPI;
function comptable2Out(table_id, html) {
    var sOut = "<table id='comptable2_"+pAPI+"' class='table table-striped' cellspacing='0' width='100%'>"+
        "<thead>"+
                "<tr>"+
                    //<th> details here
                "</tr>"+
            "</thead>"+
    "</table>";
    return sOut;
}

$(document).ready(function(){ 
    var table = $('#comptable1').DataTable( {
        "lengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
        "ajax": {
            "type": "post",
            "url": "getcompletion.php",
            "dataType": "json"
        },
        "bFilter": false,
        "columns": [
            //column details here
        ]
    } );
    
    $('#comptable1 tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            var rowData = row.data();
            pAPI = rowData.api;
            row.child(comptable2Out(pAPI)).show();

            tr.addClass('shown');
            var subTable = $('#comptable2_'+pAPI).DataTable( {
            "ajax": {
                "type": "post",
                "url": "getcompletionext.php?api="+pAPI,
                "dataType": "json"
            },
            "columns": [
                //column details here
            ]
        });
        }
    } );
});