I've got a datatable with a fixed header and column filter dropdowns which extend when hovered. But the dropdowns don't extend as they should. I've traced the problem to scrollY and scrollX in table initialisation. If I remove both scroll commands, the dropdowns work well, but the header is no longer fixed, and I need it to be fixed. I've tried using sScrollXInner and sScrollYInner, which do allow the column filter dropdowns to work, but again, the header is no longer fixed. I've also tried a number of 'z-index' options with 'relative' in CSS, but nothing seems to work. Any ideas?
HTML :
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
</tr>
</tbody>
</table>
Script :
$(document).ready(function() {
function cbDropdown(column) {
return $('<ul>', {
'class': 'cb-dropdown'
}).appendTo($('<div>', {
'class': 'cb-dropdown-wrap'
}).appendTo(column));
}
$('#example').DataTable({
scrollY: 'calc(100vh - 270px)', // dictates height of container!
scrollX: '100%',
initComplete: function() {
this.api().columns([0, 2]).every(function() {
var TotChkbxs = 0;
var TikdChkbxs = 0;
var column = this;
var ddmenu = cbDropdown($(column.header()))
.on('change', ':checkbox', function() {
var active;
var vals = $(':checked', ddmenu).map(function(index, element) {
active = true;
return $.fn.dataTable.util.escapeRegex($(element).val());
}).toArray().join('|');
column
.search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
var $label = $('<label>'),
$text = $('<span>', {
text: d
}),
$cb = $('<input>', {
type: 'checkbox',
value: d
});
$text.appendTo($label);
$cb.appendTo($label);
ddmenu.append($('<li>').append($label));
});
});
}
});
});
CSS :
.cb-dropdown-wrap {
max-height: 80px;
position: relative;
height: 19px;
}
.cb-dropdown,
.cb-dropdown li {
margin: 0;
padding: 0;
list-style: none;
transition: 0.2s 0.23s height ease-in-out;
}
.cb-dropdown {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
background: white;
border: 1px solid blue;
}
.active .cb-dropdown {
background: transparent;
}
.cb-dropdown-wrap:hover .cb-dropdown {
/* Expand container */
height: 200px;
overflow: auto;
transition: 0.15s 0.18s height ease-in-out;
}
.cb-dropdown li.active {
background: white;
}
.cb-dropdown li label {
display: block;
position: relative;
cursor: pointer;
line-height: 20px;
margin-bottom: 2px;
border-style: solid;
border-width: 1px 0px 1px 0px;
border-color: #dedede;
}
.cb-dropdown li:last-child {
padding-bottom: 12px;
}
.cb-dropdown li label>input {
position: absolute;
left: 0;
top: 1px;
width: 16px;
}
.cb-dropdown li label>span {
display: block;
margin-left: 25px;
font-family: sans-serif;
font-size: 12px;
font-weight: normal;
text-align: left;
}
.cb-dropdown li:nth-child(n+2):hover {
background: #dedede;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
background-position: 100% 10px;
}
Fiddle: https://jsfiddle.net/5djcocuL/
