Javascript 使用DataTable.js搜索js源数据的单个列过滤器

我需要有基于单个列搜索（选择输入）的过滤器

我提到了那个话题

下面的代码不会生成单个列筛选器下拉列表

另外，请注意，此示例演示了使用

initComplete

，这是一个在表完全加载时触发的回调函数。在本例中不需要使用此回调，因为加载时数据在表中可用

变量数据集=[
[“老虎尼克松”、“系统架构师”、“爱丁堡”、“5421”、“2011/04/25”、“320800美元”]，
[“Garrett Winters”、“会计师”、“东京”、“8422”、“2011/07/25”、“170750美元”]，
[“Ashton Cox”，“初级技术作者”，“旧金山”，“1562”，“2009/01/12”，“86000美元]，
[“Cedric Kelly”、“高级Javascript开发人员”、“爱丁堡”、“6224”、“2012/03/29”、“433060美元”]，
[“佐藤航空”、“会计”、“东京”、“5407”、“2008/11/28”、“162700美元”]，
[“Brielle Williamson”、“集成专家”、“纽约”、“4804”、“2012/12/02”、“372000美元”]，
[“Herrod Chandler”、“销售助理”、“旧金山”、“9608”、“2012/08/06”、“137500美元”]，
[“Rhona Davidson”、“集成专家”、“东京”、“6200”、“2010/10/14”、“327900美元”]，
[“Colleen Hurst”、“Javascript开发者”、“旧金山”、“2360”、“2009/09/15”、“205500美元”]，
];
$（文档）.ready（函数（）{
$（'#示例'）。数据表({
数据：数据集，
栏目：[{
标题：“姓名”
}, {
标题：“职位”
}, {
标题：“办公室”
}, {
标题：“Extn。”
}, {
标题：“开始日期”
}, {
标题：“工资”
}
],
“initComplete”：函数（）{
this.api（）.columns（）.every（函数（）{
var列=此；
变量选择=$（“”）
.appendTo（$（column.footer（））.empty（））
.on（'change'，function（）{
var val=$.fn.dataTable.util.escapeRegex(
$（this.val（））；
柱
.search（val？“^”+val+“$”：“”，true，false）
.draw（）；
});
column.data（）.unique（）.sort（）.each（函数（d，j）{//console.log（d）
选择。追加（“”+d+“”）
});
});
},
});
});

我会坚持使用

initComplete

选项，因为它只在DataTable完全初始化时触发一次，并且可以安全地调用API方法

不过，我会以稍微不那么冗长的方式编写该功能：

const数据集=[
[“老虎尼克松”、“系统架构师”、“爱丁堡”、“5421”、“2011/04/25”、“320800美元”]，
[“Garrett Winters”、“会计师”、“东京”、“8422”、“2011/07/25”、“170750美元”]，
[“Ashton Cox”，“初级技术作者”，“旧金山”，“1562”，“2009/01/12”，“86000美元]，
[“Cedric Kelly”、“高级Javascript开发人员”、“爱丁堡”、“6224”、“2012/03/29”、“433060美元”]，
[“佐藤航空”、“会计”、“东京”、“5407”、“2008/11/28”、“162700美元”]，
[“Brielle Williamson”、“集成专家”、“纽约”、“4804”、“2012/12/02”、“372000美元”]，
[“Herrod Chandler”、“销售助理”、“旧金山”、“9608”、“2012/08/06”、“137500美元”]，
[“Rhona Davidson”、“集成专家”、“东京”、“6200”、“2010/10/14”、“327900美元”]，
[“Colleen Hurst”、“Javascript开发者”、“旧金山”、“2360”、“2009/09/15”、“205500美元”]，
];
const dataTable=$（“#示例”）.dataTable({
数据：数据集，
dom：‘t’，
列：['Name'，'Job Title'，'Location'，'Id'，'Hire Date'，'Salary']({
标题：标题
})),
initComplete:函数（）{
//清除现有的（如果存在）
$（“#示例tfoot”）.remove（）；
//将新页脚追加到表中
$（'#示例'）。追加（''）；
//遍历表列
this.api（）.columns（）.every（函数（）{
//将节点追加到每个列页脚插入
//当前列（）.index（）作为“colindex”属性
$（'#示例tfoot tr'）。追加（``）；
//获取唯一的排序列条目并将其转换为节点
const options=this.data（）.unique（）.sort（）.toArray（）.reduce（（选项，项）=>options+=`${item}`，''；
//将选项附加到相应的
$（`#示例tfoot th:eq（${this.index（）}）select`.）.append（选项）；
});
}
});
$（'#示例'）。在（'change'，'tfoot select'，函数（事件）上{
//使用“colindex”属性值在相应列中搜索所选选项值
dataTable.column（$（event.target）.attr（'colindex'））.search（$（event.target.val（））.draw（）；
})

我在打印时遇到问题，请您帮我解决。主要原因是，标题必须位于下拉选择上方。