Is there a way to create a child row from a child row? (Nested Table)

axejr1234

Hi, I was wondering if we could actually create a child row from a child row which was generated from a parent?

So the Table structure that I'm aiming for is like this:
Parent
Child1
Child2

I was able to create a child from the parent to child1. But not from child1 to child2.

This is the jquery to create the first child (Which is working)

            $('#example tbody').on('click', '#button', function () {
                var tr = $(this).closest('tr');
                console.log(tr)
                var row = table.row(tr);
                var rowData = row.data();
                console.log("Clicked button on main");
                console.log(row)

                if (row.child.isShown()) {
                    console.log("Hide");
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');

                    // Destroy the Child Datatable
                    //$('#' + rowData.yardCode.replace(' ', '-')).DataTable().destroy();
                    ('#example').DataTable().destroy();
                }
                else {
                    console.log("Show");
                    // Open this row
                    row.child(formatChild1()).show();
                    //var id = rowData.yardCode.replace(' ', '-');


                    $('#childrow1').DataTable({
                        "processing": true, // for show progress bar
                        "serverSide": true, // for process server side
                        "filter": false, // this is for disable filter (search box)
                        "orderMulti": false, // for disable multiple column at once
                        "pageLength": 10,
                        "drawCallback": function (settings) {
                            alert('ChildRow1     Table Drawn');
                        },
                        dom: "t",
                        ajax: {
                        "url": siteRoot + "/api/MasterData/SearchCaseTypeRef",
                        "type": "POST",
                        "data": function (d) {
                            d.tenantCode = "";
                            d.operationType = "";
                            d.typeCode = "";
                            d.description = "";
                            d.warehouseCode = "";
                            },
                        "datatype": "json"
                        },
                        columns: [
                            { data: "tenantCode", title: 'Tenant Code', "className": 'yardcodeclass' },
                            { data: "operationType", title: 'Operation Type' },
                            { data: "description", title: 'Description' },
                            { data: "typeCode", title: 'Type Code' },
                            { "defaultContent": "<button id='button1'>></button>" }
                        ],
                        scrollY: '100px',
                        select: true,
                    });

                    console.log("Secnd Table Created");

                    tr.addClass('shown');
                }
                return false;
            });

This is the jquery to create a secondchild (Not Working, just to add more information, I was on the second child, i was able to console log n print till the end of the code block (which means the button click is detected), but somehow the datatable creation is not running).

            $('#example tbody').on('click', '#button1', function (e) {
                var tr = $(this).closest('tr');
                var tenantCode = $(this).closest('tr').find('.yardcodeclass').text();
                console.log(tenantCode);
                var row = table.row(tr);
                var rowData = row.data();
                console.log("Clicked on child");
                console.log(row)
                if (row.child.isShown()) {
                    console.log("Hide");
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');

                    // Destroy the Child Datatable
                    ('#childrow1').DataTable().destroy();
                } else {
                    console.log("Create Table");
                    row.child(formatChild2()).show();

                    //row.child(formatChild2()).show();
                    //console.log(row.child.isShown());
                    $('#childrow2').DataTable({
                        "processing": true, // for show progress bar
                        "serverSide": true, // for process server side
                        "filter": false, // this is for disable filter (search box)
                        "orderMulti": false, // for disable multiple column at once
                        "pageLength": 10,
                        "drawCallback": function (settings) {
                            alert('ChildRow2 Table Drawn');
                        },
                        dom: "t",
                        ajax: {
                            "url": siteRoot + "/api/MasterData/SearchCaseTypeRef",
                            "type": "POST",
                            "data": function (d) {
                                d.tenantCode = "";
                                d.operationType = "";
                                d.typeCode = "";
                                d.description = "";
                                d.warehouseCode = "";
                            },
                            "datatype": "json"
                        },
                        columns: [
                            { data: "tenantCode", title: 'Tenant Code' },
                            { data: "operationType", title: 'Operation Type' },
                            { data: "description", title: 'Description' },
                            { data: "typeCode", title: 'Type Code' },
                            { "defaultContent": "<button id='button2'>></button>" }
                        ],
                        scrollY: '100px',
                        select: true,
                    });
                    //row.child('<table id="childrow2" class="bg-white nested-table child-row-2"></table>').show();
                    tr.addClass('shown');
                    console.log(row.child.isShown());

                }
                return false;
            });

kthorngren

See if this thread helps. If not please provide a test case so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin