DataTables详细信息行不嵌套

问题描述

我正在尝试创建一个内部嵌套数据的表.我想在表的顶部设置一组列标题，并让它们贯穿整个表.为此，我开始根据自己的需要调整行详细信息"示例.代码:

I'm trying to make a table with nested data inside. I want to have one set of column headers at the top of the table and have them carry through the entire table. To this end, I've started adapting the Row Details example for my needs. The code:

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">元素中，如下所示:

However, this nests my generated rows within a single <tr colspan="4"> element, as follows:

<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列对齐.

Because of the colspan element, my child rows aren't lining up with the parent rows. For instance, I want the blank <td> to line up with the details-control column in the large table, and the 659A-27 to line up with the Item ID column.

丢弃多余的<td colspan="4"><tr></tr></td>并使我的子行简单地与父表对齐的最笨拙的方法是什么?

What would be the least-clumsy way to shed the extra <td colspan="4"><tr></tr></td> and have my child rows simply line up with the parent table?

编辑:来自文档 (重点是我的):

它提到也可以将子行放入父级的结构中" 它确实实际上描述了如何执行此操作:

It mentions that placing the child row into the parent's structure "is also possible" It does actually describe how to do this:

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

However it does not say anything about arrays of JQuery elements. I'll close this question, as this appears to simply be an unsupported feature.

推荐答案

我在datatable中找到了create detail源代码.您应该返回一个数组或jQuery对象.

I found the create detail source code in datatable.you should return a array or jQuery object.

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

            return $(html);
        }

这篇关于DataTables详细信息行不嵌套的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！