Javascript 如何在datatable jQuery中设置筛选的“从复选框”列

我使用jQuery库，我想设置用于从复选框筛选的列

在我的例子中，我设置了需要表单复选框的列，如果我选择了I列，则会自动设置为4，但不会设置所需的列

所以，如果我只选择一列进行过滤，我得到了4，并且没有正确地创建过滤器。原因可能是什么

[！[在此处输入图像描述][2][2]

如上图所示，我设置了站名，但我没有得到这个过滤器，而是其他4个过滤器，我不明白为什么

我的代码：

JS:

var idTable=$（“.custom style”）.attr（'id'）；
var table=$（'#'+idTable+''）.DataTable（）；
函数添加拆分（val）{
表1.destroy（）；
$（idTable）.DataTable({
搜索窗格：{
布局：'columns-4'，
},
dom:'Pfrtip'，
columnDefs：[{
搜索窗格：{
秀：没错，
},
目标：[''+val+'']，
}]
});
}
函数setFilters（）{
$（“表THAD tr th”）。每个（函数（索引）{
变量框=`
${$（this.text（）}
`
如果（$（this）.text（）！=“”）$（.checkbox”）.append（框）；
});
}
setFilters（）；
$（“#createFilter”）。在（“单击”，函数（）上）{
var checkedds=$（“.checkbox:checked”）.map（函数（）{
返回此.id；
}).toArray（）；
添加拆分（checkedds.join（“，”）；
});

事实上，你们很接近。问题是，columnDefs的targets选项只接受以下内容：

• 整数（正或负）
• 字符串（类名）
• 字符串“_all”（所有列）
• 一个整数数组

您正在发送一个字符串数组

因此，您只需对代码进行两次更改：

1-在createFilter的“单击”事件中，创建整数数组而不是字符串数组

$("#createFilter").on("click", function() {

    var columnFilters = [];

    $('.checkbox:checked').each(function () {
        columnFilters.push(parseInt($(this).attr('id')));
    });
    addSpliting(columnFilters);
});

2-在jQuery数据表初始化中，更改以下内容：

targets: ['' + val + '']

为此：

targets: val

下面是一个工作示例（我对您的代码做了一些修改）：

addSpliting（“”）；
函数添加拆分（val）{
如果（val！=''）{
$（“#test1”）.DataTable({
摧毁：没错，
搜索窗格：{
布局：'columns-4'，
},
dom:'Pfrtip'，
columnDefs：[{
搜索窗格：{
秀：没错，
},
目标：瓦尔
}]
});
}
否则{
$（“#test1”）.DataTable({
毁灭：真的
});
}
}
函数setFilters（）{
$（“表THAD tr th”）。每个（函数（索引）{
变量框=`
${$（this.text（）}
`
如果（$（this）.text（）！=“”）$（.checkbox”）.append（框）；
});
}
setFilters（）；
$（“#createFilter”）。在（“单击”，函数（）上）{
var=[]；
$（'.checkbox:checked'）。每个（函数（）{
columFilters.push（parseInt（$（this.attr（'id'））；
});
添加拆分（列过滤器）；
});

筛选设置：





车站代码
站名
车站类型
描述
属于生产资源
主要生产资源
A.
B
C
A.
B
C
A.
B
C
A.
B
C
A.
B
C
A.
B
C
事实上，你们很接近。问题是，columnDefs的targets选项只接受以下内容：


整数（正或负）
字符串（类名）
字符串“_all”（所有列）
一个整数数组


您正在发送一个字符串数组

因此，您只需对代码进行两次更改：

1-在createFilter的“单击”事件中，创建整数数组而不是字符串数组

$("#createFilter").on("click", function() {

    var columnFilters = [];

    $('.checkbox:checked').each(function () {
        columnFilters.push(parseInt($(this).attr('id')));
    });
    addSpliting(columnFilters);
});

2-在jQuery数据表初始化中，更改以下内容：

targets: ['' + val + '']

为此：

targets: val

下面是一个工作示例（我对您的代码做了一些修改）：


addSpliting（“”）；
函数添加拆分（val）{
如果（val！=''）{
$（“#test1”）.DataTable({
摧毁：没错，
搜索窗格：{
布局：'columns-4'，
},
dom:'Pfrtip'，
columnDefs：[{
搜索窗格：{
秀：没错，
},
目标：瓦尔
}]
});
}
否则{
$（“#test1”）.DataTable({
毁灭：真的
});
}
}
函数setFilters（）{
$（“表THAD tr th”）。每个（函数（索引）{
变量框=`
${$（this.text（）}
`
如果（$（this）.text（）！=“”）$（.checkbox”）.append（框）；
});
}
setFilters（）；
$（“#createFilter”）。在（“单击”，函数（）上）{
var=[]；
$（'.checkbox:checked'）。每个（函数（）{
columFilters.push（parseInt（$（this.attr（'id'））；
});
添加拆分（列过滤器）；
});

筛选设置：





车站代码
站名
车站类型
描述
属于生产资源
主要生产资源
A.
B
C
A.
B
C
A.
B
C
A.
B
C
A.
B
C
A.
B
C
谢谢你的回答，在代码中它运行良好，但当我测试它时，我选择了我的项目，我只选择了一列，结果我得到了5分，我尝试着修复它，但结果收到了sameDo你认为你可以试着用我的代码吗？另外，您能用您的更改更新您的JSFIDLE并共享新的链接吗？在JSFIDLE中，它工作正常，是的，我尝试了您的代码，但有相同的结果，但在您的项目中是吗