В таблице данных jQuery у меня есть несколько фильтров для выбора столбца флажка. У меня есть флажок «Выбрать все / Нет» в верхней части каждого фильтра. Я могу выбрать все флажки, но проблема в том, что я не могу ограничить выбор только активным контейнером - другими словами, все флажки в других столбцах тоже проверяются. Скрипка показывает некоторые альтернативы, которые я пробовал на основе изучения других постов по этому вопросу в течение нескольких часов, но я подозреваю, что структура выпадающих списков усложняет ситуацию в данном конкретном случае. У кого-нибудь есть идеи? Fiddle: https://jsfiddle.net/Lxytynm3/
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</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({
initComplete: function() {
this.api().columns().every(function() {
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();
// -------------------------------------------------------
// Highlight the current item if selected.
if (this.checked) {
$(this).closest('li').addClass('active');
// If 'Select all / none' clicked ON
if ($(this).val() === "1") {
$('ul.cb-dropdown').find('input[type="checkbox"]').prop('checked', this.checked)
//$(".cb-dropdown li").prop('checked', true);
//$('.cb-dropdown').closest('li').find('input[type="checkbox"]').prop('checked', true);
// $('this input[type="checkbox"]').prop('checked', true); works!
// $( 'input[type="checkbox"]' ).prop('checked', this.checked);
// $(this).find('input[type="checkbox"]').prop('checked', this.checked)
//$('div.cb-dropdown-wrap.active').children().find('input[type="checkbox"]').prop('checked', this.checked)
}
} else // 'Select all / none' clicked OFF
{
$(this).closest('li').removeClass('active');
// test if select none
if ($(this).val() === "1") {
// code to untick all
}
}
// Highlight the current filter if selected.
var active2 = ddmenu.parent().is('.active');
if (active && !active2) {
ddmenu.parent().addClass('active');
// Change Container title to "Filter on" and green
//$(this).parent().find('.cb-dropdown li:nth-child(n+1)').css('color','red');
$('active2 li label:contains("Filter OFF")').text('Yeees');
} else if (!active && active2) {
ddmenu.parent().removeClass('active');
}
});
// -------------------------------------------------------
var mytopcount = '0'; // Counter that ensures only 1 entry per container
// loop to assign all options in container filter
column.data().unique().sort().each(function(d, j) {
// Label
var $label = $('<label>'),
$text = $('<span>', {
text: d
}),
// Checkbox
$cb = $('<input>', {
type: 'checkbox',
value: d
});
$text.appendTo($label);
$cb.appendTo($label);
ddmenu.append($('<li>').append($label));
// -----------------
// Add 'Select all / none' to each dropdown container
if (mytopcount == '0') // Counter that ensures only 1 entry per container
{
$label = $('<label>'), $text = $('<span>', {
text: "Select all / none"
}),
$cb = $('<input>', {
type: 'checkbox',
value: 1
});
$text.prependTo($label).css('margin-bottom', '6px');
$cb.prependTo($label);
ddmenu.prepend($('<li>').prepend($label).css({
'border-bottom': '1px solid grey',
'margin-bottom': '6px'
}));
mytopcount = '1' // This stops this section running again in container
}
});
});
}
});
});
.
.cb-dropdown-wrap {
max-height: 80px;
position: relative;
height: 219px;
/* Temporary to fix dropdown */
}
.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 red;
}
.cb-dropdown-wrap:hover .cb-dropdown {
height: 100px;
overflow: auto;
transition: 0.15s 0.1s height ease-in-out;
}
.cb-dropdown li.active {
background: lightgreen;
}
.cb-dropdown li label {
display: block;
position: relative;
cursor: pointer;
line-height: 19px;
}
.cb-dropdown li label>input {
position: absolute;
left: 0;
top: 0;
width: 16px;
}
.cb-dropdown li label>span {
display: block;
margin-left: 24px;
/* At least, width of the checkbox. */
font-family: sans-serif;
font-size: 12px;
font-weight: normal;
text-align: left;
}
.cb-dropdown li:hover {
background: lightgrey;
}
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;
}