Datatables嵌套表根据父表获取子表的行

// 父表的数据源
var parentData = [
  { id: 1, name: "Parent 1" },
  { id: 2, name: "Parent 2" },
  // ...
];

// 子表的数据源
var childData = {
  1: [
    { id: 1, name: "Child 1-1" },
    { id: 2, name: "Child 1-2" },
    // ...
  ],
  2: [
    { id: 1, name: "Child 2-1" },
    { id: 2, name: "Child 2-2" },
    // ...
  ],
  // ...
};

// 初始化Datatables，并使用嵌套表格扩展插件
var table = $('#example').DataTable({
  data: parentData,
  columns: [
    { data: 'id', title: 'ID' },
    { data: 'name', title: 'Name' },
    { title: 'Actions', orderable: false, searchable: false, render: function() {
        return '<button class="btn btn-primary btn-sm">Show Child Rows</button>';
      }
    }
  ]
});

// 监听父表中展开子表的按钮点击事件
$('#example tbody').on('click', 'button', function() {
  var tr = $(this).closest('tr');
  var row = table.row(tr);

  // 判断子表是否已经被展开
  if (row.child.isShown()) {
    // 折叠子表
    row.child.hide();
    tr.removeClass('shown');
  } else {
    // 加载并展示子表数据
    var rowData = row.data();
    var childRows = childData[rowData.id]; // 根据父表数据获取子表数据
    var childTable = formatChildTable(childRows); // 格式化子表数据

    row.child(childTable).show();
    tr.addClass('shown');
  }
});

// 格式化子表数据为HTML字符串
function formatChildTable(childRows) {
  var html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
  html += '<thead><tr><th>ID</th><th>Name</th></tr></thead>';
  html += '<tbody>';
  
  // 构造子表的每一行
  childRows.forEach(function(childRow) {
    html += '<tr>';
    html += '<td>' + childRow.id + '</td>';
    html += '<td>' + childRow.name + '</td>';
    html += '</tr>';
  });
  
  html += '</tbody>';
  html += '</table>';
  
  return html;
}