DataTables - Not working when added colspan for the last column
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?
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>
DataTables doesn't support colspans like you're using them. Follow their complex header example instead.
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.
<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>
dataTable does not support colspan or rowspan.
If you use a colspan, dataTable won't understand the columns count / calculation, returning undefined and throwing an error in that case.
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.
For that we will use: defaultContent property, and of course expecifying the targets / affected columns.
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).
Code:
"aoColumnDefs": [{
"aTargets": [2,3],
"defaultContent": "",
}]
An alternative method is to use Child rows. This will eventually add a row below the parent as shown in the picture below
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');
});
I know is an old topic, but i had the same problem. <th colspan="2"> is working but strangely is not working only if it's used in the last column.
so
This is not working
<tr>
<th> </th> <!-- column 1 -->
<th> </th> <!-- column 2 -->
<th colspan="2"> </th> <!-- column 3&4 -->
</tr>
But this is working.
<tr>
<th> </th> <!-- column 1 -->
<th colspan="2"> </th> <!-- column 2&3 -->
<th> </th> <!-- column 4 -->
</tr>
at