add child row

tscrosh

Hi
First of all, I'm sorry but I can't enable the preview of pages (SQL server used is internal and data are not public)
I'm very beginner with this datatables and wanted to add a childrow (like the one on the main page here with + who opens the childrow)

For the moment I use following code (HTML& ASP3)

<div class="col-lg-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                Tests de conformité
                                </div>
                                <div class="panel-body">
                                    
                                    <div class="table-responsive">
                                                <table class="table table-bordered table-hover table-striped" id="T_TFC">
                                                    <thead>
                                                    <tr>
<th></th>
<th>Tests de conformité</th>
<th>Etat</th>
<th>AE</th>
<th>GAP</th>
<th>Commentaire</th>
<th></th>

                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    
<%
Set rst = SQLQuery(cnnDB, "SELECT  * from ACI.dbo.V_ACI_TFC_List  WHERE ACI_TFC_Crit_ID_Parent = " & Session("X_ACI_CRITID"))
Do While Not (rst.EOF)
%>
                                                    
                                                    
                                                    
                                                    
                                                    
                                                    <tr>
                                                    
<td><%=rst("ACI_TFC_Nbr")%></td>
<td><%=rst("ACI_TFC_Desc")%></td>
<td bgcolor=<%=rst("StatutConfColor")%>><font color="#fff"><%=rst("StatutConf")%></font></td>
<td bgcolor=<%=rst("StatutAEColor")%>><font color="#fff"><%=rst("StatutAE")%></font></td>
<td bgcolor=<%=rst("StatutGAPColor")%> ><font color="#fff"><%=rst("StatutGap")%></font></td>
<td><%=rst("ACI_TFC_GAP_Com")%></td>
<td align=center><button type="button" class="btn btn-default btn-circle"><i class="fa fa-edit"></i></button></td>

                                                        
                                                    </tr>
<%
rst.MoveNext 
Loop
rst.Close
%>
                                                    
                                                    </tbody>
                                                </table>
                                            </div>
                                            <!-- /.table-responsive -->
                                    
                                    
                                    
                                </div>

                            </div>
                        </div>

And following script

     <script src="../js/jquery-3.5.1.js"></script>  
        <script src="../js/metisMenu.min.js"></script>
        <script src="../js/dataTables/jquery.dataTables.min.js"></script>
        <script src="../js/dataTables/dataTables.bootstrap.min.js"></script>
        <script src="../js/dataTables/moment.js"></script>





<script>
$(document).ready(function () {
    $('#T_TFC').DataTable({
        initComplete: function () {
            this.api()
                .columns()
                .every(function () {
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo($(column.footer()).empty())
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex($(this).val());
 
                            column.search(val ? '^' + val + '$' : '', true, false).draw();
                        });
 
                    column
                        .data()
                        .unique()
                        .sort()
                        .each(function (d, j) {
                            select.append('<option value="' + d + '">' + d + '</option>');
                        });
                });
        },
    });
});
</script>

This table works fine for me, so I tried to add a row child by using this script

var table = $('#T_TFC').DataTable();
 
$('#T_TFC tbody').on('click', 'td.details-control', function () {
    var tr = $(this).parents('tr');
    var row = table.row( tr );
 
    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row (the format() function would return the data to be shown)
        if(row.child() && row.child().length)
        {
            row.child.show();
        }
        else {
            row.child( format(row.data()) ).show();
        }
        tr.addClass('shown');
    }
} );

var table = $('#T_TFC').DataTable();
 
table.rows().every( function () {
    this
        .child(
            $(
                '<tr>'+
                    '<td>'+rowIdx+'.1</td>'+
                    '<td>'+rowIdx+'.2</td>'+
                    '<td>'+rowIdx+'.3</td>'+
                    '<td>'+rowIdx+'.4</td>'+
                '</tr>'
            )
        )
        .show();
} );


        </script>

But no visible change, I searched a little around but even with some other tries I'm not getting any results.
Can someone please tell me how to build this child row correctly.

Thanks

tangerine

I advise following the child row example in the docs.
https://datatables.net/examples/api/row_details.html