HTML table header 使用 jQuery 数据表时使用 colspan

Question

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

我的 table 看起来像这样：

<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
    });
});

Answer 1

当我删除 colspan 时它工作正常（将所有操作放在一列中）- 最低 header 级别必须遵守规则 "one header cell for one table column"

Answer 2

CAUSE

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

SOLUTION

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

重要：请注意，每一列必须至少有一个唯一的单元格（即没有 colspan 的单元格），以便 DataTables 可以使用该单元格来检测列和用它来申请订购。

有关详细信息，请参阅 Complex headers with column visibility。

DEMO

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

HTML table header 使用 jQuery 数据表时使用 colspan

HTML table header with colspan when using jQuery DataTables

javascript

jquery

datatables