How to add nested table to datatable?

Question

I need to add a nested table to each row of a jquery datatable(using legacy datatables). So, I tried using example from datatables.net for child rows and modifying it to my needs as I need for the child rows to show at all times, rather than on clicking the parent row.Here is the code I am using both to build my inner table and then display it..

function buildInnerTable(){
var keys = Object.keys(reportApp.gridData),
    len = keys.length,
    j = 0,
    prop,
    value;
while (j < len) {
    prop = keys[j];
    value = reportApp.gridData[prop];
   detLen = value.detail.length;
   var rowVals = [];
    for(var i = 0; i < detLen; i++){
         tmpRow = "<tr><td>"+value.detail[i].invtid+"</td>"+
                "<td>"+value.detail[i].bf+"</td>"+
                "<td>"+value.detail[i].qtyship+"</td>"+  
                "<td>"+value.detail[i].ordqty+"</td>"+  
                "<td>"+value.detail[i].bf+"</td>"+
                "<td>"+value.detail[i].exttreating+"</td>"+  
                "<td>"+value.detail[i].extpriceinvc+"</td>"+  
                "<td>"+value.detail[i].misc+"</td>"+ 
                "<td>"+value.detail[i].extother+"</td>"+
                "<td>"+value.detail[i].calcext+"</td></tr>";
        rowVals.push(tmpRow);

    }
    setTableRow(rowVals , j);
    j += 1;
}


function setTableRow(rowVals , ndx){

              $("#gridTbl > tbody > tr:eq("+ ndx+ ")").after("<table><tr><th>InvtID</th>"+
                      "<th>Clss</th><th>Pieces</th><th>BilQty</th><th>BF</th><th>Treating</th>"+
                      "<th>Wood</th><th>NEED NAME</th><th>Other</th><th>Misc</th><th>Total</th></tr>"+
                      rowVals);

But, I am not getting what I need to get. What it looks like is that the datatables adds a new row and then sets the new table inside the first cell on new row. However, when I view source, that isn't what is happening at all. It closes the previous row and then inserts new table... I am attaching a screenshot. What I need is for the details to show below the main item rows and to be aligned in same way. Any help in where I am wrong will be greatly appreciated.

Answer 1

Ok... Finally figured this out. In order to make the view show normally, I had to add a new row to the datatable and then, in side that row, add my new table. However, this caused an indexing issue with the table. So, I had to check the index each time before I added new row. I am posting working code in the hope that it will help someone else.

    function buildInnerTable(){
    var keys = Object.keys(reportApp.gridData),
    len = keys.length,
    j = 0,
    prop,
    value;
while (j < len) {
    prop = keys[j];
    value = reportApp.gridData[prop]; 
   detLen = value.detail.length;
   var rowVals = [];
//THIS NEXT LINE IS WHERE I GET MY INDEX...
   var ndx = ($("tr:contains("+value.invcnbr+ ")").index());
    for(var i = 0; i < detLen; i++){
         tmpRow = "<tr><td>"+value.detail[i].invtid+"</td>"+
                "<td>"+value.detail[i].bf+"</td>"+
                "<td>"+value.detail[i].qtyship+"</td>"+  
                "<td>"+value.detail[i].ordqty+"</td>"+  
                "<td>"+value.detail[i].bf+"</td>"+
                "<td>"+value.detail[i].exttreating+"</td>"+   
                "<td>"+value.detail[i].extpriceinvc+"</td>"+  
                "<td>"+value.detail[i].misc+"</td>"+ 
                "<td>"+value.detail[i].extother+"</td>"+
                "<td>"+value.detail[i].calcext+"</td></tr>";
        rowVals.push(tmpRow);
    }

    setTableRow(rowVals,ndx);
   }
    j += 1;
  }
} 


function setTableRow(rowVals,ndx){
    var outerTbl = $('#gridTbl').DataTable();
    var tr = $("#gridTbl > tbody > tr:eq("+ ndx+ ")");
//NOTE HOW I ADD A ROW AND THEN ADD NEW TABLE TO CELL IN THE ROW.
   var innerTbl = "<tr><td colspan = 10><table style = 'background-     color:#FFFFFF; width:100%; border:1px solid;'><tr><td>InvtID</td>"+
                      "<td>Clss</td><td>Pieces</td><td>BilQty</td><td>BF</td><td>Treating</td>"+
                      "<td>Wood</td><td>NEED NAME</td><td>Other</td><td>Misc</td><td>Total</td></tr>"+
                      rowVals + "</td></tr>";
             tr.after(innerTbl).show();


}