如何使用 datatable.js 在 tbody 中使用 rowspan 和 colspan? [英] How to use rowspan and colspan in tbody using datatable.js?

问题描述

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

Whenever I use <td colspan="x"></td>, I get the following error:

未捕获的类型错误:无法设置 undefined(...) 的属性 '_DT_CellIndex'

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?

It's working properly without DataTables.js, but when we use this structure with datatable.js it is not working. We need above table structure. Does anyone have any idea how we can use this table structure datatable.js?

推荐答案

您可以通过为每个被消除的单元格添加一个不可见"单元格来解决缺少 colspan 支持的问题:

You can hack around the lack of colspan support by adding an "invisible" cell for every cell that's eliminated:

<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 没有抱怨，表格呈现正常并且排序工作(不可见列排序为空字符串).

DataTables doesn't complain, the table renders normally and sorting works (invisible columns sort as the empty string).

我还没有用 rowspan 试过这个.

I haven't tried this with rowspan.

这篇关于如何使用 datatable.js 在 tbody 中使用 rowspan 和 colspan?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！