如题在使用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>
修改代码后重新编译刷新页面,发现浏览器控制台已经没有报错,数据表格的复合表头也可以正常渲染出现。
完结~撒花✿✿✿