如何在 DataTables 表中的 <td> 内嵌套 2 行？答案

【问题标题】：How to nest 2 rows inside of <td> in DataTables table?如何在 DataTables 表中的 <td> 内嵌套 2 行？
【发布时间】：2017-06-27 13:01:33
【问题描述】：

这是一个我想与 DataTables 插件一起归档的结构。

如您所见，该地址占用 3 列。

以下 html break 数据表排序功能。而且桌子看起来发生了变化。

这是一个数据不同但思路相同的示例。

<tr>
  <td colspan="3">
     <table cellpadding="0" cellspacing="0">
         <tr>
           <td >Some very long lorem ipsum text</td>
         </tr>
         <tr>
           <td>Angelica Raaaaamos</td>   
           <td>Accountant</td>
           <td>Tokyo</td>
         </tr>
    </table>
  </td>

  <td>33</td>
  <td>2008/11/28</td>
  <td>$162,700</td>
</tr>

更新

灰色文本不是一个组。表中的每一项（每一行）都应该 包含它

【问题讨论】：

标签： jquery html css datatables

【解决方案1】：

您可以使用RowGroup 扩展名，它可以让您按给定数据点对行进行分组。

RowGroup

对表格中的行进行分组的能力可以让最终用户快速轻松地查看所显示数据的结构，并为他们提供每个组中显示的数据的摘要。 RowGroup 将此功能添加到 DataTables 中，能够自定义显示在 DataTable 中的开始和结束分组行，让您可以集成汇总数据以完美适应您的网站。

使用rowGroup 选项作为对象，您可以使用几个选项来定义行组的外观和源数据。对于所有可用选项，请查看here。

这是一个例子，相信你会明白的。 ;)

var dataSet = [
  [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800", "Foo foo foo foo bla bla" ],
  [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750", "Some very long lorem ipsum text" ],
  [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000", "Bar bar bar bar bla bla" ],
]

$('#example').DataTable({

  data: dataSet,
  columns: [
    { title: "Name" },
    { title: "Position" },
    { title: "Office" },
    { title: "Extn." },
    { title: "Start date" },
    { title: "Salary" },
  ],
  rowGroup: {
    startRender: function(row, group) {
      if(typeof group == "string") {
        return $('<tr/>')
          .append('<td colspan="6"><span>' + group + '</span></td>');
      }
    },
    endRender: null,
    className: 'table-group',
    dataSrc: 6
  }

});

table.dataTable tbody th, table.dataTable tbody .table-group td {
    padding: 0;
}

table.dataTable tbody th, table.dataTable tbody .table-group td span {
    padding: 8px 10px;
    display: block;
    color: silver;
}

table.dataTable tbody tr:nth-child(4n),
table.dataTable tbody tr:nth-child(4n-1) {
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/rowgroup/1.0.0/css/rowGroup.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.0.0/js/dataTables.rowGroup.min.js"></script>

<table id="example" class="" cellspacing="0" width="100%"></table>

【讨论】：

谢谢。但这并不是我想要的。在第一个屏幕截图中，灰色文本不是一个组。这只是每个行项目中应该不同的文本。我正在考虑使用 col/row 跨度，但看起来 DataTables 插件不支持它......
不确定我是否理解正确，但使用rowGroup，您可以在每一行添加单独的文本，只需将其添加到您的数据源，就这么简单。我对我的答案进行了编辑。

【解决方案2】：

你可以从这里得到一个想法：
尝试将您的td 隐藏为<td style='display:none;'></td>

$( function(){
	$('#id-table').DataTable();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>


<table id='id-table' border='1'>
<thead>
<tr>
    <th>Angelica Raaaaamos</th>   
    <th>Accountant</th>
    <th>Tokyo</th>
  </tr>
</thead>
<tbody>
  <tr>
   <td colspan="3">Some very long lorem ipsum text</td>
   <td style='display:none;'></td>
   <td style='display:none;'></td>
  </tr>
  <tr>
    <td>Angelica Raaaaamos</td>   
    <td>Accountant</td>
    <td>Tokyo</td>
  </tr>
  </tbody>
</table>

你得到的这个结果(Reversed Row)是bcoz，DataTable按First Column
排序您可以更改它。

【讨论】：

谢谢。更新了我的问题。

【解决方案3】：

在那里使用两个额外的空白 td。喜欢：

 <tr>
   <td >Some very long lorem ipsum text</td>
   <td></td>
   <td></td>
 </tr>

如果它不起作用，则在样式中使用宽度。喜欢：

   <tr >
       <td style="width:50px">Some very long lorem ipsum text</td>
       <td></td>
       <td></td>
     </tr>
      <tr >
       <td style="width:50px">Some</td>
       <td>Acountant</td>
       <td>london</td>
     </tr>

【讨论】：

【解决方案4】：

我会简单地把它放在评论中，但由于我的声誉太低，我建议你看看this

在 drawCallback 中，您必须在您希望它所在的行之前附加您的 <td>。

如果我有你的 jQuery 代码，我可以更具体

【讨论】：