jQuery 数据表 - 为最后一列添加 colspan 时不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19426972/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DataTables - Not working when added colspan for the last column
提问by Sagar Raj
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.
我在使用 DataTables 时遇到问题。当我为最后一列添加 colspan 时，数据表插件不会应用于表。如果我删除最后一个的 colspan 并将其放在任何其他列中，则它可以工作。
For example -
例如 -
<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({
});
Any solution for this?
有什么解决办法吗？
采纳答案by Blazemonger
DataTables doesn't support colspans like you're using them. Follow their complex header exampleinstead.
DataTables 不支持像您使用它们那样的 colspan。而是按照他们的复杂标题示例进行操作。
When using tables to display data, you will often wish to display column information in groups. DataTables fully supports colspan and rowspans in the header, assigning the required sorting listeners to the TH element suitable for that column. Each column must have one TH cell (and only one) which is unique to it for the listeners to be added.The example shown below has the core browser information grouped together.
使用表格显示数据时，您通常希望以组的形式显示列信息。DataTables 完全支持标题中的 colspan 和 rowspans，将所需的排序侦听器分配给适合该列的 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>
回答by gesf
dataTable does not support colspan or rowspan.
dataTable 不支持 colspan 或 rowspan。
If you use a colspan, dataTable won't understand the columns count / calculation, returning undefined and throwing an error in that case.
如果您使用 colspan，dataTable 将无法理解列数/计算，在这种情况下返回 undefined 并抛出错误。
So what we need to do, is tell dataTable that in case it doesn't get the expected result, what should be the alternative one.
所以我们需要做的，就是告诉dataTable，如果它没有得到预期的结果，应该有什么替代方案。
For that we will use: defaultContent property, and of course expecifying the targets / affected columns.
为此，我们将使用：defaultContent 属性，当然还有目标/受影响的列。
For example: on a table with 3 td's if we use td colspan="2", we will have to set the default values for the other 2 (because one already exists - and it's the first).
例如：在有 3 个td的表上，如果我们使用td colspan="2"，我们将不得不为其他 2 个设置默认值（因为一个已经存在 - 它是第一个）。
Code:
代码：
"aoColumnDefs": [{
"aTargets": [2,3],
"defaultContent": "",
}]
回答by Dency G B
An alternative method is to use Child rows. This will eventually add a row below the parent as shown in the picture below
另一种方法是使用Child rows. 这最终将在父项下方添加一行，如下图所示
Code
代码
var table =jQuery('#bwki_sites_display').DataTable( {
'pageLength': 10,
'lengthMenu': [ 10, 20, 50, 100, 200 ],
'order': [[ 0, 'desc' ]],
}
);
table.rows().every( function () {
var row = table.row( $(this));
html = '<i class="fa fa-plus"></i>Colspan will come here';
row.child(html).show();
$(this).addClass('shown');
});
回答by renkse
Instead of using complex header exampleyou can add hidden column to the end of tr, it's hacky but simpler and shorter in my opinion:
您可以将隐藏列添加到 tr 的末尾，而不是使用复杂的标题示例，在我看来，它很笨拙但更简单和更短：
<thead>
<tr>
<th> </th> <!-- column 1 -->
<th colspan="2"> </th> <!-- column 2&3 -->
<th colspan="2"> </th> <!-- column 4&5 -->
<!-- hidden column 6 for proper DataTable applying -->
<th style="display: none"></th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- hidden column 6 for proper DataTable applying -->
<td style="display: none"></td>
</tr>
</tbody>
