Question

我尝试使用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
    });
});

Answer 1

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

Answer 2

<强>原因

它不起作用，因为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>

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

2 个答案: