Hide entries in child row

Hide entries in child row

rf1234rf1234 Posts: 2,357Questions: 76Answers: 339

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");
            }
        })
    })
Sign In or Register to comment.