如何使用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:

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

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

data-hide =truedata-console =truedata-babel =false

Demo

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