HTML table header with colspan when using jQuery DataTables

Question

I try to use jQuery DataTables plugin, but it fails with message c is undefined on line 256 (in the minified version).

My table looks like this:

<table class="datatable">
    <thead>
        <th>
            <td>name</td>
            <td colspan="3">actions</td>
        </th>
    </thead>
    <tbody>
        <tr>
            <td>Foo</td>
            <td>Detail</td>
            <td>Edit</td>
            <td>Remove</td>
        </tr>
    </tbody>
</table>

I bind the plugin like this:

$(document).ready(function() {
    $('.datatable').DataTable({
        responsive: true
    });
});

Datatable doesnt support colspan see : http://stackoverflow.com/questions/19426972/datatables-not-working-when-added-colspan-for-the-last-column — Zaki, Aug 18 '15 at 13:22
thanks @Zaki - I already noticed that (see my answer) - I made this question to specify the concrete error that belongs to it, because I was not able to find it anywhere — Jarda, Aug 18 '15 at 13:42
@Zaki, this is not true. You can use `colspan` in the header, see [this example](http://datatables.net/examples/advanced_init/complex_header.html). The only requirement that each column must have at least one unique cell. — Gyrocode.com, Aug 18 '15 at 14:13
@Gyrocode.com nope they are using colspan for top level header — Zaki, Aug 18 '15 at 14:45
@Zaki, yes, but stating that `colspan` is not supported is incorrect, this attribute is supported but you need to have another row with one cell per column. — Gyrocode.com, Aug 18 '15 at 15:34
@Gyrocode.com as OP said it is not working with his table structure, so I stay corrected... — Zaki, Aug 18 '15 at 15:36
@Gyrocode.com than you for your edit, but Zaki is right that it might be supported, but this case, I specified, is not working. It's obvious that the example is easiest way of creating table with grouped columns, so I think that it is valuable to say "it is not working this way" — Jarda, Aug 19 '15 at 14:06
Added [my answer](http://stackoverflow.com/a/32101783/3549014) with alternative solution to demonstrate that DataTables supports `rowspan` / `colspan` attributes. — Gyrocode.com, Aug 19 '15 at 17:18

Jarda · Accepted Answer · 2015-08-20T11:46:52.383

3

It is working correctly when I remove the colspan (put all actions in one column) - the lowest header level must keep rule "one header cell for one table column"

edited Aug 20 '15 at 11:46

answered Aug 18 '15 at 13:10

Jarda

566
1
9
33

score 3 · Answer 2 · answered Aug 19 '15 at 17:17

CAUSE

It doesn't work because DataTables requires at least one unique cell (i.e. a cell without colspan) in the header per column.

SOLUTION

You need to add individual cells for each action, you can also remove heading for these cells if you want.

IMPORTANT: Note that each column must have at least one unique cell (i.e. a cell without colspan) so DataTables can use that cell to detect the column and use it to apply ordering.

See Complex headers with column visibility for more details.

DEMO

$(document).ready( function () {
  var table = $('#example').DataTable({
     columnDefs: [
        { targets: [1,2,3], orderable: false, searchable: false }
     ]
  });
} );

<!DOCTYPE html>
<html>

<head>
<meta charset=utf-8 />
<title>jQuery DataTables</title>  
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
</head>
  
<body>
<table id="example" class="display">
    <thead>
       <tr>
         <th rowspan="2">Name</th>
         <th colspan="3">Actions</th>
       </tr>     
       <tr>
         <th>Detail</th>
         <th>Edit</th>
         <th>Remove</th>         
       </tr>
    </thead>
    <tbody>
        <tr>
            <td>Foo</td>
            <td>Detail</td>
            <td>Edit</td>
            <td>Remove</td>
        </tr>
    </tbody>
</table>
</body>
</html>

Thanks for the example - it is correct (giving vote-up). Still it is not the answer to original question since this changes the original table layout... (I need to keep my table as compact as possible) — Jarda, Aug 20 '15 at 09:01

HTML table header with colspan when using jQuery DataTables

2 Answers2