CODEWITHSUNDEEP
javascriptjquerydatatables
Jarda
Jarda

Reputation: 596

HTML table header with colspan when using jQuery DataTables

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
    });
});

Upvotes: 0

Views: 4820

Answers (2)

Jarda
Jarda

Reputation: 596

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"

Upvotes: 3

Gyrocode.com
Gyrocode.com

Reputation: 58880

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>

Upvotes: 3

Related Questions