Broken Sub DataTable w/jqueryui

The sorting is broken with jquery UI and DataTables when nesting a table inside of a table

HTML

<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/725b2a2115b/integration/jqueryui/dataTables.jqueryui.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn.datatables.net/plug-ins/725b2a2115b/integration/jqueryui/dataTables.jqueryui.js"></script>
<table id="parentTable">
    <thead>
        <tr>
            <th></th>
            <th>Values</th>
            <th>Number</th>
            <th>Other</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class='expander'>+</span>
            </td>
            <td>value 1</td>
            <td>111</td>
            <td>xyz</td>
        </tr>
        <tr>
            <td><span class='expander'>+</span>
            </td>
            <td>value 2</td>
            <td>222</td>
            <td>xyz</td>
        </tr>
        <tr>
            <td><span class='expander'>+</span>
            </td>
            <td>value 3</td>
            <td>333</td>
            <td>xyz</td>
        </tr>
    </tbody>
</table>

JavaScript

$(function () {
    var parentTable = $("#parentTable").DataTable({
        order: [1, "asc"],
        columnDefs: [{
            sortable: false,
            targets: [0]
        }]
    });

    $(".expander").css({
        cursor : "pointer"
    }).click(function () {
        var row = parentTable.row($(this).closest("tr"));
        
        if(row.child() == undefined){
            $(this).html("-");
            var $table = $("'<table cellpadding="5" cellspacing="0" >'+
            '<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>');
            $table.attr("id", "childTable_" + row.index());
            var childTable = $table.DataTable({
                order: [0, "desc"],
                columnDefs: [{
                    sortable: false,
                    targets: [1, 2]
                }]
            });
            
            row.child(childTable.table().container());
            row.child.show();
        } else {
            $(this).html("+");
            row.child(false);
        }
    });

});