DataTables详细信息行不嵌套

Question

我正在尝试创建一个表，其中包含嵌套数据。我想在表的顶部设置一组列标题，并让它们贯穿整个表。为此，我已经开始根据需要修改“ 行详细信息”示例。代码：

var table = this.$el.attr({
  'width': '100%',
  'class': 'table table-striped table-hover'
}).DataTable({
  data: data,
  autoWidth: true,
  paging: false,
  order: [[0,'asc']],
  columns: [
    {
      'width':15,
      'class':'details-control',
      'orderable':false,
      'data':null,
      defaultContent: '+'
    },
    {data:'term',title:'Item ID'},
    {data:'count',title:'Count'}
  ]
});

this.$el.find('tr.group').each(function(i){
  var $tr = $(this);
  var row = table.row($tr);
  console.log(row.data());
  row.child($.map(row.data().samples, function(sample){
    return $('<tr><td></td><td>Sample: '+sample.name+'</td></tr>');
   })).show();
});

但是，这会将我生成的行嵌套在单个<tr colspan="4">元素中，如下所示：

<tbody>
  <tr>
    <td class="details-control">+</td>
    <td>659A</td>
    <td>12</td>
  </tr>
  <tr>
    <td colspan="4">
      <tr>
        <td></td>
        <td>659A-27</td>
      </tr>
    </td>
  </tr>
</tbody>

由于该colspan元素，我的子行未与父行对齐。例如，我希望空白<td>与details-control大表中的列对齐，并659A-27与Item ID列中的对齐。

什么是最笨拙的方式来省掉多余的钱<td colspan="4"><tr></tr></td>并使我的子行与父表对齐？

编辑：从文档 （重点是我的）：

子行的内容完全独立于主表（而不是它们在文档中的位置）。应用于表的顺序，搜索等对子行的顺序没有影响。通常，每个子行都包含一个单元格，该单元格的colspan属性设置为横跨整个表格宽度，因此该单元格的内容覆盖了整个表格宽度。但是，也可以传入一个tr具有多个单元格的元素（表中每一列一个），以与主表相同的列结构显示子行数据。

它提到将子行放入父级结构“也是可能的” 但没有描述如何实现，如上所述，直观的尝试失败了。它确实描述了如何执行此操作：

jQuery-具有要添加的节点的jQuery对象。如果jQuery结果集中有多个元素，则将它们添加为多行。如果节点是trelement，则将其视为子行，否则将自动创建行和单元格，并将jQuery结果集中的节点插入其中。

但是，它没有说有关JQuery元素数组的任何内容。我将结束这个问题，因为这似乎只是不受支持的功能。

Answer 1

我在数据表中找到了创建详细信息的源代码。您应该返回一个数组或jQuery对象。

function formatDetail(data) {
            var html = "";
            $.each(data, function () {
                html += "<tr><td>1</td><td>2</td></tr>";
            });

            return $(html);
        }