jQuery - 第三方表格插件DataTables使用详解9（列头合并、复杂表头）

2018-03-25 发布：hangge 阅读：5853

十九、列头合并

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>