Jquery.dataTables数据表格设置复合表头

如题在使用Jquery.dataTables数据表格时，由于数据列比较多需要使用复合表头来区分，直接使用colspan和rowspan发现数据表格没有正常渲染，且浏览器控制台出现报错：
Uncaught TypeError: Carnot read properties of undefined (reading style )

下面展示html和渲染数据表格的js代码：

错误代码：

<table id="dataTableList" class="table table-bordered table-hover dataTable">
    <thead>
    <tr>
        <th rowspan="3" class="text-center">所在区域</th>
        <th rowspan="3" class="text-center">所属公司</th>
        <th rowspan="3" colspan="2" class="text-center">所属项目</th>
        <th colspan="4" class="text-center">项目人员</th>
        <th rowspan="3" class="text-center">项目总人数</th>
    </tr>
    <tr>
        <th colspan="2" class="text-center">开发部</th>
        <th colspan="2" class="text-center">测试部</th>
    </tr>
    <tr>
        <th  class="text-center">普通人员</th>
        <th  class="text-center">管理人员</th>
        <th  class="text-center">普通人员</th>
        <th  class="text-center">管理人员</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<script>
$('#dataTableList').DataTable({
    ajax: {
        url: 'localhost:8080/getList'
    },
    columns: [
        {data: "area"},
        // 省略
    ],
    paging: false,
    ordering: false,
    info: false,
    searching: false,
    scrollX: true,
    scrollY: "400px",
    scrollCollapse: true,
    fixedHeader: true, // 固定首行
});
</script>

页面效果图：

报错信息：

---

    从控制台给出的报错信息，可以知道错误是指向了jguery. dataTables.is:5292:7处，经过分析源码发现是dataTables在循环处理<th>表头时出错，元素为空。

    最后又排查了一遍代码发现，dataTables数据表格的表头渲染是根据<thead>中的第一行<tr>来进行渲染的，但是在第一行<tr>中我们设置了colspan和rowspan属性会导致实际上<th>的数量与数据列的数量不一致。
    此时只需增加一个<tr>元素，设置正确的<th>数量，同时进行隐藏不影响页面展示即可。
纠正后的代码如下：

---

正确代码如下：

<table id="dataTableList" class="table table-bordered table-hover dataTable">
    <thead>
    <tr style="display: none">
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
	</tr>
    <tr>
        <th rowspan="3" class="text-center">所在区域</th>
        <th rowspan="3" class="text-center">所属公司</th>
        <th rowspan="3" colspan="2" class="text-center">所属项目</th>
        <th colspan="4" class="text-center">项目人员</th>
        <th rowspan="3" class="text-center">项目总人数</th>
    </tr>
    <tr>
        <th colspan="2" class="text-center">开发部</th>
        <th colspan="2" class="text-center">测试部</th>
    </tr>
    <tr>
        <th  class="text-center">普通人员</th>
        <th  class="text-center">管理人员</th>
        <th  class="text-center">普通人员</th>
        <th  class="text-center">管理人员</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>

修改代码后重新编译刷新页面，发现浏览器控制台已经没有报错，数据表格的复合表头也可以正常渲染出现。

完结~撒花✿✿✿