Datatables row.child not working (dt-control class not applying to )

Datatables row.child not working (dt-control class not applying to )

crick46crick46 Posts: 1Questions: 1Answers: 0

Hi,
I'm trying to implement row child in my datatable but I can't make it work despite following examples from this site.
The icon to expand the row child is not showing, when i'm inspecting the website i find that the class dt-control is not applied to the <td>. If i add the class dt-control to the <td> directly in the firefox inspector it works, i can click the icon and it's showing the row child.

Any help please?

My javascript file:

function format ( devisData ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Commentaire:</td>'+
            '<td>'+devisData.commentaire+'</td>'+
        '</tr>'+
    '</table>';
}


$(document).ready(function(){   
    var devisData = $('#devisList').DataTable({
        responsive: true,
        scrollX: true,
        paging: false,
        autoWidth: false,
        scrollY: "65vh",
        scrollCollapse: true,
        fixedHeader: true,
        autoFill: true,
        /*fixedColumns:   {
            leftColumns: 2,
            rightColumns: 2
        },*/
        lengthChange: true,
        processing:true,
        serverSide:true,
        order:[],
        ajax:{
            url:"action.php",
            type:"POST",
            data:{action:'createTable'},
            dataType:"json",
            dataSrc:"data"
        },
        columns:[
            {
                className: "td.dt-control",
                orderable: false,
                data: null,
                defaultContent: '',
            },
            { data: "id" },
            { data: "type" },
            { data: "num_devis" },
            { data: "date_creation" },
            { data: "intitule" },
            { data: "responsable" },
            { data: "client" },
            { data: "contact" },
            { data: "pays" },
            { data: "objet" },
            { data: "secteur" },
            { data: "statut" },
            { data: "licence" },
            { data: "date_envoi_devis" },
            { data: "montant" },
            { data: "p_marge_brut" },
            { data: "marge_brut" },
            { data: "achat" },
            { data: "nombre_heure" },
            { data: "p_marge_nette" },
            { data: "date_relance" },
            { data: "commentaire" },
            { data: "date_commande" },      
        ],
        columnDefs:[
            {
                width: '20%',
                targets: 0,
            },
            /*{
                visible: false,
                target: 0,
            },
            {
                orderable: false,
                target: 1,
            },*/
        ]
        
    }); 
    $('#devisList td:first-child').addClass('dt-control');
    $('#devisList tbody').on('click', 'td.dt-control', function () {
        var tr = $(this).closest('tr');
        var row = devisData.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );    
});

Html file:

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Application Devis</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.2.2/css/fixedColumns.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.3.2/css/fixedHeader.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <link rel="stylesheet" href="css.css">
    
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
    
    <script src="https://cdn.datatables.net/fixedcolumns/4.2.2/js/dataTables.fixedColumns.min.js"></script>
    <script src="https://cdn.datatables.net/fixedheader/3.3.2/js/dataTables.fixedHeader.min.js"></script>
    
    <script src="js/data.js"></script>
</head>
<header>
    <nav class="navbar navbar-dark bg-dark">
        <a class="navbar-brand" href="#">
            <img id="logo" src="img/logo.png" width="130" height="40" class="d-inline-block align-top" alt="">     APPLICATION DEVIS</a>
    </nav>
</header>
<body>
    <div class="container-fluid">
        <button type="button" name="add" id="addDevis" class="btn btn-success btn-xs">Créer nouvelle entrée</button>
        <table id="devisList" class="compact hover row-border stripe" style="width:100%">
            <thead class="thead-dark">
                <tr>
                    <th>Expand</th>
                    <th>id</th>
                    <th>type</th>
                    <th>Devis</th>
                    <th>Création</th>
                    <th>Intitule</th>
                    <th>Responsable</th>
                    <th>Client</th>
                    <th>Contact</th>
                    <th>Pays</th>
                    <th>Objet</th>
                    <th>Secteur</th>
                    <th>Statut</th>
                    <th>Licence</th>
                    <th>Envoi Devis</th>
                    <th>Montant</th>
                    <th>% Marge Brut</th>
                    <th>Marge Brut</th>
                    <th>Achat</th>
                    <th>Heures</th>
                    <th>% Marge Nette</th>
                    <th>Relance</th>
                    <th>Commentaire</th>
                    <th>Commande</th>   
                    <!--<th></th>
                    <th></th>-->
                </tr>
            </thead>
        </table>
    </div>
</body>

</html>

Thanks

Answers

  • allanallan Posts: 58,873Questions: 1Answers: 9,471 Site admin

    className: "td.dt-control",

    That's a CSS selector - not a class name. Change it to be:

    className: "dt-control",
    

    And that should do it. See the page here for a working example.

    Allan

Sign In or Register to comment.