Unable to nest datatables

CDeCinko

I am able to generate a main DataTable and a "child" DataTable. But when I try and place the "child" table into a row I am getting a an error (Unable to get property 'show' of undefined or null reference). Below is my code. If I hard code the table HTML it works fine, with single quotes wrapped around. I've tried stripping out line breaks and wrapping in quotes but still no good.

<link rel="stylesheet" type="text/css" href="/css/dataTables.jqueryui.css" />

<script type="text/javascript" charset="utf8" src="/scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="/Scripts/dataTables.jqueryui.js"></script>
<script type="text/javascript" charset="utf8" src="/scripts/tinymce/tiny_mce.js"></script>


<style type="text/css">
    #ethicsOpinions_wrapper select {
        width: auto;
    }

    .ui-dialog-content.ui-widget-content {
        padding: 10px 30px 10px 15px;
    }


    td.details-control {
        background: url('/images/details_open.png') no-repeat center center;
        cursor: pointer;
    }
    tr.shown td.details-control {
        background: url('/images/details_close.png') no-repeat center center;
    }
</style>

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

    $(function () {
        ethicalRulesTableHtml = $("#ethicalRulesGrid").html();

        var table = $('#ethicalRulesSections').DataTable({
            "ajax": "/umbraco/surface/RulesSurface/getRulesSections",
            "order": [[1, 'asc']],
            stateSave: false,
            "paging": false,
            "autoWidth": true,
            "processing": true,
            "jQueryUI": true,
            "destroy": true,
            "deferRender": true,
            "filter": false,
            "dom": '<lfr>t<"F"p>',
            "columns": [
                {
                    "data": null,
                    className: "dt-center details-control",
                    "defaultContent": "",
                    "width": "20px",
                    "orderable": false
                },
                {
                    "data": 0,
                    "visible": false
                },
                {
                    "data": 1,
                    "width": "50px",
                    className: "dt-center"
                },
                {
                    "data": 2
                }
            ]
        });

        // Add event listener for opening and closing details
        $('#ethicalRulesSections 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');
            }
        });

    });

    function format(d) {
        $('#ethicalRules').DataTable({
            "ajax": "/umbraco/surface/RulesSurface/getRules/" + d[0],
            "order": [[1, 'asc']],
            "width": "630px",
            stateSave: false,
            "paging": false,
            "autoWidth": true,
            "processing": true,
            "jQueryUI": true,
            "destroy": true,
            "deferRender": true,
            "filter": false,
            "dom": '<lfr>t<"F"p>',
            "columns": [
                {
                    "data": 1,
                    "visible": false
                },
                {
                    "data": 2,
                    "width": "50px",
                    className: "dt-center"
                },
                {
                    "data": 3
                }
            ],
            "initComplete": function (settings, json) { return $('#ethicalRules')[0].outerHTML; }
        });
    }
</script>


<div id="ethicalRulesSectionsGrid">
    <table id="ethicalRulesSections" cellpadding="0" cellspacing="0" border="0" class="display ca_highlight_row">
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th>Section Number</th>
                <th>Section</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>



<div id="ethicalRulesGrid">
    <table id="ethicalRules" cellpadding="0" cellspacing="0" border="0" class="display ca_highlight_row" style="margin:0 0 0 110px;">
        <thead>
            <tr>
                <th></th>
                <th>Rule Number</th>
                <th>Rule</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>