带有子行的数据表（子数据表）。默认情况下，如何创建/扩展所有子数据表？

Question

我有一个带子dataTables的dataTable，我不能让它们在每个页面上展开。我可以使它们在当前页面上展开，但是当我转到另一个页面时，不会显示子表。似乎子行存在，但未创建dataTable。如果我折叠然后展开子行，则会创建dataTable。

这是我从gyrocode.com分叉的小提琴 https://jsfiddle.net/jsfiddlertwo/8rmq3foy/

这是展开按钮功能

$('#btn-show-all-children').on('click', function(){
    // Enumerate all rows
    table.rows().every(function(){
        // If row has details collapsed
        if(!this.child.isShown()){
            // Open this row
            this.child(format(this.data())).show();
            childTable(this.data());
            $(this.node()).addClass('shown');
        }
    });
}); 

我的格式函数为子数据表创建html

function format ( d ) {
    var childId = d.extn;
  return '<div><table id=\'child-table' + childId + '\' class=\'table-striped table-bordered\'></table></div>';
}

childTable函数创建子数据表

var childTable = $(childId).DataTable({
    colReorder: true,
    searching: false,
    info: false,
    paging: false,
    scrollY: false,
    data: data.children,
    columns: [{
        title: "Name",
        render: function(data, type, row, meta) {
          return row.name;
        }
      },
      {
        title: "Class",
        render: function(data, type, row, meta) {
          return row.class;
        }
      },
    ]
    });
}

展开按钮将展开并在当前页面上显示子数据表。麻烦的是，当我转到另一个页面时，子数据表不存在。在另一页上，我可以单击该行两次（折叠然后重新展开），然后创建sub-dataTables。 我已经尝试过使用drawcallback，但是在创建新页面之前会调用它。

如何在所有页面上创建子数据表？