使用 jQuery DataTables 时带有 colspan 的 HTML 表头答案

【问题标题】：HTML table header with colspan when using jQuery DataTables使用 jQuery DataTables 时带有 colspan 的 HTML 表头
【发布时间】：2015-08-18 13:10:58
【问题描述】：

我尝试使用 jQuery DataTables 插件，但在第 256 行（在缩小版中）出现消息 c is undefined 失败。

我的桌子是这样的：

<table class="datatable">
    <thead>
        <th>
            <td>name</td>
            <td colspan="3">actions</td>
        </th>
    </thead>
    <tbody>
        <tr>
            <td>Foo</td>
            <td>Detail</td>
            <td>Edit</td>
            <td>Remove</td>
        </tr>
    </tbody>
</table>

我是这样绑定插件的：

$(document).ready(function() {
    $('.datatable').DataTable({
        responsive: true
    });
});

【问题讨论】：

数据表不支持 colspan 见：stackoverflow.com/questions/19426972/…
感谢@Zaki - 我已经注意到（见我的回答） - 我提出这个问题是为了指定属于它的具体错误，因为我无法在任何地方找到它
@Zaki，这不是真的。您可以在标题中使用colspan，请参阅this example。唯一的要求是每列必须至少有一个唯一的单元格。
@Gyrocode.com 不，他们正在使用 colspan 作为顶级标题
@Zaki，是的，但说不支持colspan 是不正确的，支持此属性，但您需要另一行，每列一个单元格。

标签： javascript jquery datatables

【解决方案1】：

原因

这不起作用，因为 DataTables 要求每列的标题中至少有一个唯一的单元格（即没有colspan 的单元格）。

解决方案

您需要为每个操作添加单独的单元格，如果需要，您还可以删除这些单元格的标题。

重要提示：请注意，每一列必须至少有一个唯一的单元格（即没有colspan 的单元格），以便 DataTables 可以使用该单元格来检测列并使用它来应用排序。

更多详情请见Complex headers with column visibility。

演示

$(document).ready( function () {
  var table = $('#example').DataTable({
     columnDefs: [
        { targets: [1,2,3], orderable: false, searchable: false }
     ]
  });
} );

<!DOCTYPE html>
<html>

<head>
<meta charset=utf-8 />
<title>jQuery DataTables</title>  
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
</head>
  
<body>
<table id="example" class="display">
    <thead>
       <tr>
         <th rowspan="2">Name</th>
         <th colspan="3">Actions</th>
       </tr>     
       <tr>
         <th>Detail</th>
         <th>Edit</th>
         <th>Remove</th>         
       </tr>
    </thead>
    <tbody>
        <tr>
            <td>Foo</td>
            <td>Detail</td>
            <td>Edit</td>
            <td>Remove</td>
        </tr>
    </tbody>
</table>
</body>
</html>

【讨论】：

感谢您的示例 - 它是正确的（给予投票）。仍然不是原始问题的答案，因为这会改变原始表格布局......（我需要保持表格尽可能紧凑）

【解决方案2】：

当我删除 colspan 时它工作正常（将所有操作放在一列中） - 最低标题级别必须保持规则“一个表列的一个标题单元格”

【讨论】：