How do I style a child row in server-side ,responsive, row-detail table?
How do I style a child row in server-side ,responsive, row-detail table?
peruaners
Posts: 3Questions: 1Answers: 0
Spent many days figuring this out and can´t find an answer in forum.Hopefully someone out there can help me out I want my styles from column "Teatergrupp" and column "Status" to follow along inside child when I resize the window and thoose columns appear there. See page here:denlillateatern.se/2017/datatabell/tabell.php
Part of code here:
$( document ).ready( function () {
var dt = $( '#example' ).DataTable( {
"responsive": true,
"processing": true,
"serverSide": true,
"ajax": "scripts/ids-objects.php",
"columnDefs": [{
"targets": [6],
"createdCell": function(td, cellData, rowData, row, col) {
switch(cellData) {
case "Utsålt":
$(td).addClass('utsalt');
break; }}},],
"columns": [
{
"orderable": false,
"data": null,
"defaultContent": ""
},{
"data": "fst_datum",
className: "all"
}, {
"data": "fst_tid",
className: "all"
}, {
"data": "fst_namn",
className: "all"
}, {
"data": "grupp_namn",
className: "min-phone"
}, {
"data": "age",
className: "min-phone"
}, {
"data": "show_not",
className: "min-phone"
}, {
"data": "boka",
className: "min-phone",
render: function ( data, type, row ) {
if ( row.boka.substring( 0, 1 ) == '0' ) {
return row.boka;
} else {
return '<a href="' + row.boka + '">Boka online</a>';}}
}, {
"data": "img",
className: "none",
"render": function ( data, type, row ) {
return '<img src="' + data + '" />';}
}, {
"data": "fst_beskrivning",
className: "none"
}
],
"order": [
[ 1, 'asc' ]
],
],} );
var detailRows = [];
$( '#example tbody' ).on( 'click', 'tr td.details-control', function () {
var tr = $( this ).closest( 'tr' );
var row = dt.row( tr );
var idx = $.inArray( tr.attr( 'id' ), detailRows );
if ( row.child.isShown() ) {
tr.removeClass( 'details' );
row.child.hide();
// Remove from the 'open' array
detailRows.splice( idx, 1 );
} else {
tr.addClass( 'details' );
row.child( format( row.data() ) ).show();
// Add to the 'open' array
if ( idx === -1 ) {
detailRows.push( tr.attr( 'id' ) );
}
}
} );
// On each draw, loop over the `detailRows` array and show any child rows
dt.on( 'draw', function () {
$('tr td:nth-child(5)').each(function (){
$(this).addClass('image')
});
$.each( detailRows, function ( i, id ) {
$( '#' + id + ' td.details-control' ).trigger( 'click' );
} );
} );
} );
This discussion has been closed.