Hide entries in child row

Hide entries in child row

rf1234rf1234 Posts: 2,783Questions: 85Answers: 403

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

  • asleasle Posts: 96Questions: 28Answers: 0
    edited April 2023

    Wow! This is the best solution for hiding empty cells in a child row in a responsive table. Thanks @rf1234 !!

Sign In or Register to comment.