18

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>&nbsp;</th>
        <th colspan="2">&nbsp;</th>
        <th colspan="2">&nbsp;</th>
      </tr>
   </thead>
   <tbody>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
   </tbody>
</table>

$('#stu_data_table').dataTable({
});

Any solution for this?

Sagar Raj
  • 909
  • 3
  • 14
  • 34

5 Answers5

9

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>&nbsp;</th> <!-- column 1 -->
    <th colspan="2">&nbsp;</th> <!-- column 2&3 -->
    <th colspan="2">&nbsp;</th> <!-- column 4&5 -->

    <!-- hidden column 6 for proper DataTable applying -->
    <th style="display: none"></th> 
  </tr>
</thead>

<tbody>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>

    <!-- hidden column 6 for proper DataTable applying -->
    <td style="display: none"></td>
  </tr>
</tbody>
renkse
  • 502
  • 7
  • 15
8

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">&nbsp;</th> <!-- column 1 -->

    <th colspan="2">&nbsp;</th> <!-- column 2&3 -->
    <th colspan="2">&nbsp;</th> <!-- column 4&5 -->
  </tr>
 <tr>
    <th>&nbsp;</th> <!-- column 2 -->
    <th>&nbsp;</th> <!-- column 3 -->

    <th>&nbsp;</th> <!-- column 4 -->
    <th>&nbsp;</th> <!-- column 5 -->
 </tr>
</thead>
Blazemonger
  • 90,923
  • 26
  • 142
  • 180
4

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": "",
}]
ByteHamster
  • 4,884
  • 9
  • 38
  • 53
gesf
  • 63
  • 7
  • 1
    Only use stack snippets for complete code snippets of HTML and javascript. Otherwise just format you answer with the code tool (looks like `{ }`) – ryanyuyu Feb 27 '15 at 16:42
  • If you already have the aoColumnDefs specified for each column, you can just add the "defaultContent" property at the end like this: `"aoColumns": [ null, {"bSortable": true, "defaultContent":""}, {"bSortable": true, "defaultContent":""}]` – Will Jul 12 '17 at 03:03
4

An alternative method is to use Child rows. This will eventually add a row below the parent as shown in the picture below

enter image description here

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');                                              
});
Dency G B
  • 8,096
  • 9
  • 47
  • 78
  • thanks for this code, but this wont work when i click the next page – aldo Aug 23 '16 at 07:37
  • I had the same problem with the first version of this code which can be seen in the edit history. But the above code works fine for me in all pages – Dency G B Aug 23 '16 at 09:12
1

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>&nbsp;</th> <!-- column 1 -->
    <th>&nbsp;</th> <!-- column 2 -->
    <th colspan="2">&nbsp;</th> <!-- column 3&4 -->
</tr>

But this is working.

<tr>    
    <th>&nbsp;</th> <!-- column 1 -->
    <th colspan="2">&nbsp;</th> <!-- column 2&3 -->
    <th>&nbsp;</th> <!-- column 4 -->
</tr>

at

visualcd
  • 11
  • 1