Want to hide empty child rows

abc000

What's the easy way to hide particular child row's, if no data is in it in server side processing.

Output example of child rows below:
Product information
Product name : XYZ
Minium quantity : 1000 pcs
Rate :
Additional cost : Taxes extra
Tentative delivery time :

Here Rate & Tentative delivery time, has no data in it. So I don't want to display these child rows (if empty). Whereas, display if not empty.
God the only one, bless you to the right path of success hereafter.
Thanks in advance.
Abdullah.

Partial code used:-

var dt = $('#example').DataTable( {
scrollX: "100%",
"processing": true,
"serverSide": true,
"ordering": true,
"ajax": {
url:"/ids-objects.php"
},

    "columns": [
        { "data": "product" },
        {
            "class":          "details-control",
            "orderable":      false,
            "data":           null,
            "defaultContent": ""
        }
    ],
    "order": [[0, 'asc']]
} );




// Array to track the ids of the details displayed rows
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 () {
    $.each( detailRows, function ( i, id ) {
        $('#'+id+' td.details-control').trigger( 'click' );
    } );

} ); 

}

function format ( d ) {
// d is the original data object for the row
return '

'+ ''+''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ '

Product information
Product name :	'+d.product+'
Minium order quantity :	'+d.minimum+'
Rate :	'+d.rate+'
Additional cost :	'+d.rplus+'
Tentative delivery time :	'+d.delivery+'

';

silkspin

This is a way of achieving what you want. The "First" and "Second" child rows will always show but the "Third" will only show if the value isn't null.

function format ( d ) {
  // `d` is the original data object for the row
  var html = '<table class="child-row-table">';
    html += '<tr>'+
            '<td><div class="child-row-title">First</div></td>'+
            '<td>'+d.first+'</td>'+
            '</tr>'+
            '<tr>'+
            '<td><div class="child-row-title">Second</div></td>'+
            '<td>'+d.second+'</td>'+
            '</tr>';
    if (d.third !== '') {
      html += '<tr>'+
              '<td><div class="child-row-title">Third</div></td>'+
              '<td>'+d.third+'</td>'+
              '</tr>';
    }
    html += '</table>';
    return html;
}

abc000

It worked.
Thanks a lot (silkspin) dear brother/ sister.
You have been very kind and helpful.
May The God (the only one) bless you for the same and guide you to the right path of success hereafter.

Thanks a lot once again dear.
Hadak Allah
Abdullah.