Insert datatable to row.Child()

Insert datatable to row.Child()

MuhaheMuhahe Posts: 25Questions: 8Answers: 2

Hello, is possible to insert another datatable to row.child().show? Im using this

if (showHideItems['p'+data.id] ==true){
                   
                   //subtablesId.push('p'+data.id)
                   
                   var tr = td.closest('tr');
                   
                   var nRow = this.api().row( tr );
                   var elem = format(nRow.data())
                   var table = initializeSubTable(elem,allTasksData['p'+data.id]);
                   console.log(elem)
                   console.log(table)
                    nRow.child(table).show();
                    tr.addClass('shown');
                   
                   
                }

Where table is initialized datatable from initializeSubTable function

function initializeSubTable(subtableElement, tableData){
    
    var subTable = $(subtableElement).DataTable({
        "dom": '<"cleaner">lf<"cleaner"><"cleaner"><"cleaner">rtip',
        "stateSave": true,
        "data":tableData,             
        "columns":[
        {
            "data": null, 
            "orderable": false,
            "defaultContent": ''
        },
        {
            "data": null
        },

        {
            "data": null
        },

        {
            "data": null
        },

        {
            "data": null
        },

        {
            "data": null
        },

        {
            "data": null
        },

        {
            "data": null
        },

        {
            "data": null
        },

        {
            "data": null
        },

        {
            "data": null
        },

        {
            "data": null
        },

        {
            "data": null
        }
        ],
        "createdRow": function (row,data,index){
            if(data.child != null){
                $('td', row).eq(0).addClass('details-control')
                if (showHideItems['t'+data.id] ==true){
                    
                }
            }
        },       
        "columnDefs": [
        {   
            "targets":0,               
            "render": function (data, type, row){                  
                return ''          
            }           
        },
        {   
            "targets":1,           
            "render": function (data, type, row){
                return '<a href='+data.taskLink+'>'+data.name+'</a>';              
            }   
        },
        {   
            "targets":2,
            "render": "customer"   
        },
        {
            "targets":3,
            "render": "platform"   
        },
        {   
            "targets":4,
            "render": "product"  
        },
        {   
            "targets":5,
            "render": function (data, type, row){
                if(data.userId == null){
                    return "none";
                }else{
                    return '<a href=' + data.userLink + '>' + data.userName + ' ' + data.userSurname + '</a>';
                }              
            }   
        },
        {   
            "targets":6,
            "render": function (data, type, row){
                var date = data.start.date.split(" ")[0].split("-");
               
                return date[2]+'.'+date[1]+'.'+date[0];             
            }   
        },
        {   
            "targets":7,
            "render": function (data, type, row){
                var date = data.end.date.split(" ")[0].split("-");
               
                return date[2]+'.'+date[1]+'.'+date[0];            
            }   
        },
        {   
            "targets":8,
            "render": function (data, type, row){
                if (userRole == "viewOnly"){
                    if(data.finished == "1"){
                        return "Yes";
                    }else{
                        return "No";
                    }
                }else{
                    if(data.finished=="1"){
                        return "<input type='checkbox' class='finish_button_uk' value='"+data.id+"' checked><span id='check_label_uk"+data.id+"'>Yes</span>";
                    }else{
                        return "<input type='checkbox' class='finish_button_uk' value='" + data.id + "'><span id='check_label_uk" + data.id + "'>No</span>";
                    }
                }             
            }   
        },
        {   
            "targets":9,
            "render": "priority"            
                  
        },
        {   
            "targets":10,
            "render": function (data, type, row){
                if(data.log==""){
                    return "none";
                }else{
                    return "<a href='file://" + data.log + "'><img src=" + basePath + "/images/log.png></a>";
                }               
            }   
        },
        {   
            "targets":11,
            "render": "level"            
                  
        },
        {   
            "targets":12,
            "render": function (data, type, row){
                if (userRole == "viewOnly"){
                    return "";
                }else{
                    return "<img src=" + basePath + "/images/deleteButton.png onclick='deleteProjectRow(this,"+data.id+");'>";
                }              
            }   
        },
        ]
       
    });
    yadcf.init(subTable,[           
    {
        column_number :1,            
        filter_type: "multi_select",
        select_type: 'chosen',
        use_dataTable_render: 'true'
    },
    {
        column_number :2,
        filter_type: "multi_select",
        select_type: 'chosen',
        use_dataTable_render: 'true'
    },
    {
        column_number :3,
        filter_type: "multi_select",
        select_type: 'chosen',
        use_dataTable_render: 'true'
    },
    {
        column_number :4,
        filter_type: "multi_select",
        select_type: 'chosen',
        use_dataTable_render: 'true'
    },
    {
        column_number :5,
        filter_type: "multi_select",
        select_type: 'chosen',
        use_dataTable_render: 'true'
    },
    {
        column_number :6,
        filter_type: "multi_select",
        select_type: 'chosen',
        use_dataTable_render: 'true'
    },
    {
        column_number :7,
        filter_type: "multi_select",
        select_type: 'chosen',
        use_dataTable_render: 'true'
    },
    {
        column_number :8,
        filter_type: "multi_select",
        select_type: 'chosen',
        use_dataTable_render: 'true'
    },
    {
        column_number :9,
        filter_type: "multi_select",
        select_type: 'chosen',
        use_dataTable_render: 'true'
    },
           
    ])
       
    subTable.on('click', 'td.details-control', function (event) {
        event.stopPropagation();
        //event.stopImmediatePropagation();
        var tr = $(this).closest('tr');
        var row = subTable.row( tr );
        
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
            delete showHideItems['t'+row.data().id]
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
            showHideItems['t'+row.data().id] = true
            
            if(! $.fn.DataTable.isDataTable('#subtable_t'+row.data().id)){
                initializeSubTable('#subtable_t'+row.data().id,allTasksData['t'+row.data().id])
            }
        }
        
    })
    return subTable;


}
This discussion has been closed.