没有嵌套的 DataTables 详细信息行答案

【问题标题】：DataTables detail row without nesting没有嵌套的 DataTables 详细信息行
【发布时间】：2014-05-28 20:42:32
【问题描述】：

我正在尝试制作一个包含嵌套数据的表格。我想在表格顶部有一组列标题，并让它们贯穿整个表格。为此，我已经开始调整Row Details example 以满足我的需要。代码：

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> 并让我的子行简单地与父表对齐的最不笨拙的方法是什么？

编辑：来自the documentation（强调我的）：

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

它提到将子行放入父结构“也是可能的”~~但没有描述如何实现这一点，并且如上所述，直观的尝试失败了。~~它确实实际上描述了如何做到这一点：

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

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

【问题讨论】：

标签： jquery datatable datatables jquery-datatables

【解决方案1】：

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

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

            return $(html);
        }

【讨论】：

【解决方案2】：

我在这里有一个愚蠢的解决方案，但它有效

row.child('').show();
tr.addClass('shown');
var c = tr.next();
c.children().remove();
c.html (format(row.data()));

【讨论】：

【解决方案3】：

我也尝试过同样的方法，经过一些尝试和错误后，这个解决方案对我来说很好。

DataTables 版本 1.10.16

table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
  var data = this.data();
  //i use the data rendered on server side, which in my case are multiple tr. you can remove the data check if not needed ;) 
  if(data.childRow){
    this
      .child(
        //$(data.childRow)
        $('<tr><td>test</td></tr>')
      )
      .show();
  }
} );

【讨论】：