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
});
});
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 : stackoverflow./questions/19426972/… – Zaki 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 – Jarda Commented Aug 18, 2015 at 13:42
-
@Zaki, this is not true. You can use
colspanin the header, see this example. The only requirement that each column must have at least one unique cell. – Gyrocode. Commented Aug 18, 2015 at 14:13 - @Gyrocode. nope they are using colspan for top level header – Zaki Commented Aug 18, 2015 at 14:45
-
@Zaki, yes, but stating that
colspanis not supported is incorrect, this attribute is supported but you need to have another row with one cell per column. – Gyrocode. Commented Aug 18, 2015 at 15:34
2 Answers
Reset to default 3CAUSE
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/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery./jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables/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>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"
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745035140a4607471.html
评论列表（0条）