0

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
    });
});
Improve this question
8
  • Datatable doesnt support colspan see : stackoverflow.com/questions/19426972/… Commented Aug 18, 2015 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 Commented Aug 18, 2015 at 13:42
  • @Zaki, this is not true. You can use colspan in the header, see this example. The only requirement that each column must have at least one unique cell. Commented Aug 18, 2015 at 14:13
  • @Gyrocode.com nope they are using colspan for top level header Commented Aug 18, 2015 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. Commented Aug 18, 2015 at 15:34

2 Answers 2

Reset to default
3

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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)
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"

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.