Datatables Child Row Hanlde Null Values

Question

I'm using this example from the datatables website in order to display a table and offer the abaility to expand the rows and show additional data. See working code below;

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "../ajax/data/objects.txt",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" }
        ],
        "order": [[1, 'asc']]
    } );

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );

It all works as expected, however i've noticed that if the child rows contain any null values the the word 'null' is displayed. Whereas I'd like to display an empty string or custom default content ('not available').

The datatables docs explain how to handle null values using columns.defaultContent similar to the code below but i'm not sure how I would apply this to the child rows?

$('#example').dataTable( {
  "columns": [
    null,
    null,
    null,
    {
      "data": "first_name", // can be null or undefined
      "defaultContent": "<i>Not set</i>"
    }
  ]
} );

Any advice is appreciated.

Answer 1

The data field can take a function in addition to just a string. You could use a basic function to check for the string value being equal to null in this case. Something like this should work I believe. "defaultContent" might be fully unnecessary at this point but I left it just in case. You can try to remove it with some testing if you want.

$('#example').dataTable( {
    "columns": [
        null,
        null,
        null,
       {
            "data": function ( row, type, set ) {
                 if(!row.property || row.property == "null" || row.property == "undefined"){
                     return "<i>Not set</i>";
                 } else {
                     return row.mavenArtifact;
                 }
             },
            "defaultContent": "<i>Not set</i>"
       }
   ]
} );

EDIT:

I did not see that you were talking about the child rows. It looks like the format function is generating the html to be displayed as your child row. You can move these same basic checks to that function. I moved the checks to their own formatValue function as seen below.

function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>' + formatValue(d.name) + '</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>' + formatValue(d.extn) + '</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
     '</table>';
}

function formatValue(value){
    if(!value || value == 'undefined' || value == "null"){
        return "<i>Not set</i>";
    } else {
        return value;
    }
}