Datatables row.child not working (dt-control class not applying to )
Datatables row.child not working (dt-control class not applying to )
crick46
Posts: 2Questions: 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
This question has an accepted answers - jump to answer
Answers
That's a CSS selector - not a class name. Change it to be:
And that should do it. See the page here for a working example.
Allan
Yeah my bad I figured it out after taking a break.
Thanks for your answer though