When creating child rows, my implementation refuses to show them.

schwartzb4

Hello all,

I'm trying to add a details view to my table, however even though my functions get called correctly in the console, it never outputs a child object. Any insight would be greatly appreciated.

<script type="text/javascript">
    var table;

    function format(s){
        console.log('format function successfully called');
        return s;
    }

    $(document).ready(function(){
        table = $('#GOAT').DataTable({
            "columnDefs":[
                {"orderable": false, "targets":1}
            ]
            });

        $('#GOAT tbody').on('click', 'tr', function () {
//            var data = table.row(this).data();
//            console.log('You clicked on the '+data[2]+' row');
            var tr = $(this).closest('tr');
//            alert(tr.id);
            var row = table.row( tr );
//            alert(row.id);

            if (row.child.isShown() ) {
                // This row is already open - close it
                console.log("closing child");
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                console.log("opening child");
                row.child(["this is a test string","another test string"]).show();
                row.child("this is a test string").show();
                row.child(format(row.data())).show();
                row.child.show();
                tr.addClass('shown');
            }
        } );
    });