演示

Question

每当我使用<td colspan="x"></td>时，我都会收到以下错误：

未捕获的TypeError：无法设置未定义的属性'_DT_CellIndex'（...）

演示

$("table").DataTable({});

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>

<table style="width:50%;">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td colspan="2">3 4</td>
      <td colspan="3">4 5 6</td>
    </tr>
  </tbody>
</table>

没有DataTables.js它正常工作，但是当我们将这个结构与datatable.js一起使用时，它无法正常工作。我们需要上面的表结构。有谁知道我们如何使用这个表结构datatable.js？

Answer 1

你可以通过添加一个＆＃34;隐形＆＃34;来解决缺乏colspan支持的问题。每个被淘汰的细胞的细胞：

<tr>
 <td colspan="3">Wide column</td>
 <td style="display: none;"></td>
 <td style="display: none;"></td>
</tr>
<tr>
 <td>Normal column</td>
 <td>Normal column</td>
 <td>Normal column</td>
</tr>

DataTables没有抱怨，表格正常呈现并且排序工作（不可见的列排序为空字符串）。

我没有用rowspan尝试过这个。

Answer 2

目前，数据表不支持对表体的rowspan或colspan。

Reference

但是，可能的解决方案应该是

DataTables hidden row details example

希望它有效。

Answer 3

COLSPAN：Ajax或JavaScript源数据

Dirk Bergstrom提供的优秀解决方案仅适用于HTML源数据。

也可以对Ajax源数据使用相同的想法。

在表格主体中创建TR元素时，您需要使用createdRow选项修改所需的单元格。

例如：

var table = $('#example').DataTable({
    ajax: 'https://api.myjson.com/bins/qgcu',
    createdRow: function(row, data, dataIndex){
        // If name is "Ashton Cox"
        if(data[0] === 'Ashton Cox'){
            // Add COLSPAN attribute
            $('td:eq(1)', row).attr('colspan', 3);

            // Hide required number of columns
            // next to the cell with COLSPAN attribute
            $('td:eq(2)', row).css('display', 'none');
            $('td:eq(3)', row).css('display', 'none');

            // Update cell data
            this.api().cell($('td:eq(1)', row)).data('N/A');
        }
    }
});

请参阅this example以获取代码和演示。

有关详细信息，请参阅jQuery DataTables: COLSPAN in table body TBODY - Ajax data文章。

ROWSPAN

可以使用RowsGroup插件模拟ROWSPAN属性。

要使用该插件，您需要包含JavaScript文件dataTables.rowsGroup.js并使用rowsGroup选项来指示要应用分组的列的索引。

var table = $('#example').DataTable({
   'rowsGroup': [2]
});

请参阅this example以获取代码和演示。

有关详细信息，请参阅jQuery DataTables: ROWSPAN in table body TBODY文章。

COLSPAN和ROWSPAN

如果我们结合上述两种解决方法，可以同时对细胞进行垂直和水平分组。

请参阅this example以获取代码和演示。

有关详细信息，请参阅jQuery DataTables: COLSPAN in table body TBODY - COLSPAN and ROWSPAN文章。

Answer 4

如果您使用的是scrollX

<thead>
<tr>
 <th style="width: 20px;"></th>
 <th>column H</td>
 <th>column H</td>
</tr>
</thead>
<tbody>
<tr>
 <td colspan="3">Wide column</td>
 <td style="display: none;"></td>
 <td style="display: none;"></td>
</tr>
<tr>
 <td>123</td>
 <td>Normal column</td>
 <td>Normal column</td>
</tr>
</tbody>

#Dirk_Bergstrom的修改答案

Answer 5

请参阅以下链接。

fnFakeRowspan

另请参阅此插件。

fnFakeRowspan plugin

希望这会对你有所帮助

Answer 6

我不知道在什么时候，但我猜fnFakeRowspan不支持当前的DataTable版本。

有关替代方案，请结帐RowsGroup插件。

发现它很容易实现并且运行良好。搜索工作完美，订购没有。

检查here是否有实施。

Answer 7

由于数据表不支持colspan，所以我通常最终使用列表样式为无的无序列表（ul）：

here is the result

Answer 8

简单的解决方案在这里。

<tr>
    <td colspan="4">details</td>
    <td style="display: none"></td>
    <td style="display: none"></td>
    <td style="display: none"></td>
</tr>

没有其他解决方案 Promise

如何使用datatable.js在tbody中使用rowspan和colspan？

演示

8 个答案:

COLSPAN：Ajax或JavaScript源数据

ROWSPAN

COLSPAN和ROWSPAN