当表头单元格中存在colspan时，DataTables抛出错误

Question

我得到以下错误时使用colspan在我的th标签。

Uncaught TypeError: Cannot read property 'mData' of undefined

通常，当表单元格的数量在每一行中不相等时，会发生此错误，但情况并非如此。这是我的代码：

<table id="foo">
<thead>
    <tr>
        <th colspan="5">asdf</th>
    </tr>
</thead>

<tbody>

    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>

</tbody>
</table>

<script>
    $('#foo').DataTable();
</script>

下面是codepen中的一个示例：https://codepen.io/anon/pen/EQOVMe?editors=1111

使用jQuery 1.12.3和数据表1.10.16

有什么想法吗？

Answer 1

您只需在表的AD中使用两个tr即可。它与通常在表中使用colspan和rowspan没有什么不同。您可以在这里看到JSFIDLE。

<table width="100%" id="example">
  <thead style="background:#C0C0C0;">
    <tr>
      <th colspan="5">first headline</th>
    </tr>
    <tr>
      <th style="padding-left: 15px;"> Id </th>
      <th> Product Name </th>
      <th> Total Events </th>
      <th> Total Revenue </th>
      <th> Rental Time </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>$372,000</td>
      <td>New York</td>
      <td>4804</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>$137,500</td>
      <td>San Francisco</td>
      <td>9608</td>
    </tr>
  </tbody>

</table>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

$(document).ready(function() {
    $('#example').DataTable();
} );

Answer 2

根据这里的文档，Datatables在标题中支持colspan和rowspan，但需要注意。

每个列必须有一个TH单元格，该单元格对于要添加的侦听器是唯一的。

我想出了一个黑客解决方案，我不知道这是否是最好的解决方案，但它确实提供了一个可行的解决方案。

创建两个标题行，第一个标题行使用colspan属性，第二个标题行使用所有单独的列。然后应用cssdisplay:none隐藏行。这将允许datatable初始化而不会出错。但是，我不确定它是否会对其他功能造成任何副作用。

使现代化

最初，我使用css应用了show： no，但是这个解决方案没有使用容器的全宽度绘制表格。所以我修改了这个，以便在表初始化和绘制后在代码中应用样式。这允许它以完整的容器宽度显示。

$(document).ready(function() {
  $('#foo').DataTable();
  $("tr.hideme").css({"display" : "none"});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>

<table id="foo">
  <thead>
    <tr>
      <th colspan="5">asdf</th>
    </tr>
    <tr class="hideme">
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>

  </tbody>
</table>