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

Question

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

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined(…)

演示

$("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

您可以通过为每个被消除的单元格添加一个“不可见”单元格来解决缺乏 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 试过这个。