Select 在“使用数据表选择”中插入复选框时出现问题
我正在寻找一种方法,在select中插入一个复选框,并分别获取每一列,所有这些都使用DataTables。我在中找到了一个很好的示例,但由于某些原因,在选择所有记录时,筛选并没有按预期显示数据。有没有人能找到一个正常工作的解决方案? 提前谢谢。 链接应用程序代码如下所示:Select 在“使用数据表选择”中插入复选框时出现问题,select,search,checkbox,datatables,Select,Search,Checkbox,Datatables,我正在寻找一种方法,在select中插入一个复选框,并分别获取每一列,所有这些都使用DataTables。我在中找到了一个很好的示例,但由于某些原因,在选择所有记录时,筛选并没有按预期显示数据。有没有人能找到一个正常工作的解决方案? 提前谢谢。 链接应用程序代码如下所示: $(document).ready(function() { function cbDropdown(column) { return $('<ul>', { 'class': 'cb-dr
$(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") {
$(ddmenu).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
$(ddmenu).find('input[type="checkbox"]').prop('checked', false)
}
}
// 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 cotainer
}
});
});
}
});
});
$(文档).ready(函数(){
函数cbDropdown(列){
返回$(“”{
“类”:“cb下拉列表”
}).附录($(''){
“类”:“cb下拉包装”
}).附于(列)之后;
}
$('#示例')。数据表({
initComplete:function(){
this.api().columns().every(函数()){
var列=此;
var ddmenu=cbDropdown($(column.header()))
// -------------------------------------------------------
.on('change',':复选框',函数(){
var活跃;
var VAL=$(':checked',ddmenu).map(函数(索引,元素){
主动=真;
返回$.fn.dataTable.util.escapeRegex($(element.val());
}).toArray().join(“|”);
柱
.search(vals.length>0?“^(“+vals+”)$”:”,真,假)
.draw();
// -------------------------------------------------------
//高亮显示当前项目(如果选中)。
如果(选中此项){
$(this).closest('li').addClass('active');
//如果单击“全选/无”
如果($(this.val()=“1”){
$(ddmenu).find('input[type=“checkbox”]').prop('checked',this.checked)
//$(“.cb下拉列表li”).prop('checked',true);
//$('.cb下拉列表').closest('li').find('input[type=“checkbox”]).prop('checked',true);
//$('this input[type=“checkbox”]”)。prop('checked',true);有效!
//$('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//“全选/无”已单击关闭
{
$(this).closest('li').removeClass('active');
//如果选择“无”,则进行测试
如果($(this.val()=“1”){
//代码以取消选中所有
$(ddmenu).find('input[type=“checkbox”]”)。prop('checked',false)
}
}
//高亮显示当前过滤器(如果选中)。
var active2=ddmenu.parent().is('.active');
如果(活动&&!活动2){
ddmenu.parent().addClass('active');
//将容器标题更改为“过滤器打开”和绿色
//$(this.parent().find('.cb下拉列表li:n子项(n+1)).css('color','red');
$('active2 li标签:包含(“过滤”)).text('Yeees');
}else if(!active&&active2){
ddmenu.parent().removeClass('active');
}
});
// -------------------------------------------------------
var mytopcount='0';//确保每个容器只有一个条目的计数器
//循环以指定容器筛选器中的所有选项
column.data().unique().sort().each(函数(d,j){
//标签
变量$label=$(''),
$text=$(“”{
正文:d
}),
//复选框
$cb=$(''){
键入:“复选框”,
价值:d
});
$text.appendTo($label);
$cb.appendTo($label);
ddmenu.append($(“- ”).append($label));
// -----------------
//将“全选/无”添加到每个下拉列表容器中
if(mytopcount=='0')//确保每个容器只有一个条目的计数器
{
$label=$(''),$text=$(''){
文本:“全部选择/无”
}),
$cb=$(''){
键入:“复选框”,
价值:1
});
$text.prependTo($label.css('margin-bottom','6px');
$cb.prependTo($label);
ddmenu.prepend($(“
- ”).prepend($label).css({
“边框底部”:“1px纯色灰色”,
“页边距底部”:“6px”
}));
mytopcount='1'//这将停止此节在cotainer中再次运行
}
});
});
}
});
});
似乎问题出在“全选”复选框上。一种解决方案是检查VAL
初始化中的“1”,这似乎有效:
var vals = $(':checked', ddmenu).map(function(index, element) {
if($(element).val() !== "1"){
return $.fn.dataTable.util.escapeRegex($(element).val());
}
}).toArray().join('|');
这将在选中顶部复选框时看到一些结果。希望能有所帮助。亲爱的烦人老鼠,你不知道你的解决方案是如何帮助我的。谢天谢地,有像你这样的人利用他们的时间来帮助我们。非常感谢你。