jQuery - 第三方表格插件DataTables使用详解9（列头合并、复杂表头）
作者：hangge | 2018-03-25 08:10
十九、列头合并
DataTables 可以在 thead 标签中同时配置多个 tr 实现多重列头。而且 DataTables 也支持列头的合并，只需通过 colspan 和 rowspan 属性设置要跨越的列数与行数即可。同时这些属性也会根据子列的显示、隐藏而动态变化，保证显示的正确。1，效果图
这里对表格设置了两层列头，其中编号列跨越上下两级，而随后每两个子列又有一个组合列头。
2，样例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
<script src="media/js/jquery.dataTables.js" type="text/javascript"></script>
<link rel="stylesheet" href="media/css/jquery.dataTables.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
var table = $('#myTable').DataTable();
});
</script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th rowspan="2">编号</th>
<th colspan="2">基本信息</th>
<th colspan="2">附加信息</th>
</tr>
<tr>
<th>姓名</th>
<th>性别</th>
<th>出生日期</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td>011</td>
<td>张三</td>
<td>男</td>
<td>2011-11-23</td>
<td>333@QQ.com</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>女</td>
<td>2001-11-23</td>
<td>444@QQ.com</td>
</tr>
</tbody>
</table>
</body>
</html>
全部评论（0）