本文介绍了数据表 - 为最后一列添加 colspan 时不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在使用数据表时遇到问题.当我为最后一列添加 colspan 时，数据表插件不会应用于表.如果我删除最后一列的 colspan 并将其放到任何其他列，它就可以工作.
I've a problem using DataTables. When i add colspan for the last column, the datatable plugin wont get applied to the table. If i remove the colspan for the last one and put it to any other column, it works.
例如 -
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="stu_data_table">
<thead>
<tr>
<th> </th>
<th colspan="2"> </th>
<th colspan="2"> </th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
$('#stu_data_table').dataTable({
});
有什么解决办法吗?
推荐答案
DataTables 不支持像您使用它们那样的 colspan.改用他们的复杂标题示例.
当使用表格显示数据时，您通常希望显示分组中的列信息.DataTables 完全支持 colspan 和标题中的行跨度，将所需的排序侦听器分配给适用于该列的 TH 元素.每列必须有一个 TH单元格(并且只有一个)对于听众来说是独一无二的 下面的例子有核心浏览器信息组合在一起.
<thead>
<tr>
<th rowspan="2">Rendering engine</th>
<th rowspan="2">Browser</th>
<th colspan="3">Details</th>
</tr>
<tr>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
你的等价物看起来像这样:
Your equivalent would look something like this:
<thead>
<tr>
<th rowspan="2"> </th> <!-- column 1 -->
<th colspan="2"> </th> <!-- column 2&3 -->
<th colspan="2"> </th> <!-- column 4&5 -->
</tr>
<tr>
<th> </th> <!-- column 2 -->
<th> </th> <!-- column 3 -->
<th> </th> <!-- column 4 -->
<th> </th> <!-- column 5 -->
</tr>
</thead>
这篇关于数据表 - 为最后一列添加 colspan 时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！