Hide entries in child row
Hide entries in child row
rf1234
Posts: 2,809Questions: 85Answers: 406
in Responsive
When using the responsive extension with many columns in the child row I wanted to hide empty cells for the respective child row when it is displayed. So this is not about hiding empty columns but about hiding empty fields in child rows individually for each displayed child row.
This works (class "hidden" is a Bootstrap class; you might want to use somehting else).
table.on( 'responsive-display', function ( e, dt, row, show, update ) {
var x = row.index();
$('tbody tr.child td.child ul li[data-dt-row="' + x + '"]').each(function(){
if ( $(this).find('.dtr-data').text() <= "" ) {
$(this).addClass("hidden");
} else {
$(this).removeClass("hidden");
}
})
})
Replies
Wow! This is the best solution for hiding empty cells in a child row in a responsive table. Thanks @rf1234 !!