Hide entries in child row

rf1234

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");
            }
        })
    })

asle

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