Question

我试图在里面创建一个包含嵌套数据的表。我希望在表的顶部有一组列标题，并让它们遍历整个表。为此，我开始根据自己的需要调整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元素，该元素具有多个单元格（表格中每列一个），以显示与主表格相同的列结构中的子行数据

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

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

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

Answer 1

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

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

            return $(html);
        }

Answer 2

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

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

Answer 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();
  }
} );

DataTables详细列没有嵌套

3 个答案: