Menu
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.
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?
536
The solution is to include a TD node for each cell, use COLSPAN attribute on the first cell in a group and hide the remaining cells by applying display: none CSS style.
DataTables fully supports colspan and rowspan in the table's header, assigning the required order listeners to the TH element suitable for that column. Each column must have one TH cell which is unique to it for the listeners to be added.
According to MSDN DataTable Class "The maximum number of rows that a DataTable can store is 16,777,216"
Instead of using complex header example you can add hidden column to the end of tr, it's hacky but simpler and shorter in my opinion:
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
