Multiple child row

Rambaldi

Hi, I want to add two child rows with two different tables. I haven't found anything that can do this.
Can you help me?

                   $('#Gmugrid tbody').on('click', 'td.dt-control', function () {
                       var tr = $(this).closest('tr');
                       var row = table.row(tr);
                       var rowData = row.data();
                       if (row.child.isShown()) {
                           row.child.hide();
                       }
                       else {
                           row.child(format(rowData)).show();
                           var childTable = $('#cl' + row.data().ID).DataTable({
                               ajax: {
                                   url: '/xxxxxxxxxx',
                                   
                                   contentType: 'application/json; charset=utf-8',
                                   dataSrc: 'd.data'
                               },
                               columns: [
                                   { data: 'Edit', className: 'noVis dt-body-center', orderable: false },   
                                   {
                                       data: 'xxxxxxx',
                                       orderable: false
                                   },
                                   { data: 'Ixxxxxx', title: 'xxxxxxx' }
                               ],
                               fixedHeader: {
                                   header: true,
                                   footer: false
                               },
                               searching: false, 
                               paging: false,
                           });
                           tr.addClass('shown');


                           row.child(formatRef(rowData)).show();
                           var childTableReferenti = $('#ref' + row.data().CodiceAnagrafico).DataTable({
                               ajax: {
                                   url: '/yyyyyyyyy',
                                   contentType: 'application/json; charset=utf-8',
                                   dataSrc: 'd.data'
                               },
                               columns: [
                                   { data: 'Edit', className: 'noVis dt-body-center', orderable: false },   
                                   { data: 'yyyy', title: 'yyyy' }
                               ],
                               searching: false, 
                               paging: false,
                           });
                       tr.addClass('shown');
                   }
 .................

    function format(d) {
        var childTable = '<table id=""cl' + d.ID + '"" class=""table table-striped table-hover"">' +
            '<thead></thead >' +
            '</table>';
        return $(childTable).toArray();
    }
    function formatRef(d) {
        var childTableReferenti = '<table id=""ref' + d.Idr + '"" class=""table table-striped table-hover"">' +
            '<thead></thead >' +
            '</table>';
        return $(childTableReferenti).toArray();
    }

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Datatables supports only one child row per parent row. combine the format and formatRef functions into one function that generates the required HTMl for both tables. Then initialize both Datatables and add the shown class.

Kevin

Rambaldi

Thanks, I succeeded