How to populate DataTable Child Rows

zgoforth

So I followed the manual to populate child rows with Data, but when I try to do it, it is an empty table. Any clue why this may be

function format ( data ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Program:</td>'+
            '<td>'+data.value.Program+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Recipient:</td>'+
            '<td>'+data.value.To+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Date:</td>'+
            '<td>'+data.value.Date+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Approved:</td>'+
            '<td>'+data.value.Approved+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Additional Notes:</td>'+
            '<td>'+data.value.Notes+'</td>'+
        '</tr>'+
    '</table>';
}
$(document).ready(function() {
    var urls = ["url1", "url2","url3"];
 
    for (i=0; i < urls.length; i++) { //for loop to run through the AJAX until all URLs have been reached
      $.ajax({
        url: urls[i],
        'headers': { 'Accept': 'application/json;odata=nometadata' },
        success: function (data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
          data = data;
          var table = $('#myTable').DataTable();
          table.rows.add( data.value ).draw();
        }
      }); 
    }
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "Deliverable" }
        ],
        "order": [[1, 'asc']]
 
    $('#myTable 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 {
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );
</script>

kthorngren

I believe the data.value.Program data structure you have is incorrect. Use console.log(data); on line 3, before the 'return', to see the data structure you have.

Kevin