У меня есть дата с фиксированными выпадающими заголовками и фильтрами столбцов, которые расширяются при наведении курсора. Но выпадающие не расширяются, как они должны. Я проследил проблему до scrollY и scrollX в инициализации таблицы. Если я удаляю обе команды прокрутки, выпадающие списки работают хорошо, но заголовок больше не фиксируется, и мне нужно, чтобы он был исправлен. Я попытался использовать sScrollXInner и sScrollYInner, которые позволяют работать с раскрывающимися списками фильтра столбцов, но опять же, заголовок больше не фиксируется. Я также попробовал несколько опций 'z-index' с 'относительным' в CSS, но, похоже, ничего не работает. Есть идеи?
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>
Сценарий:
$(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;
}
Скрипка: https://jsfiddle.net/5djcocuL/