Javascript 使用DataTable.js（过滤器位于顶部）搜索js源数据的单个列过滤器

我无法将过滤器选择置于顶部。我怎样才能取得成功

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

另外，我应该在什么位置将列下拉值设置为unnique

const数据集=[
[“老虎尼克松”、“系统架构师”、“爱丁堡”、“5421”、“2011/04/25”、“320800美元”]，
[“Garrett Winters”、“会计师”、“东京”、“8422”、“2011/07/25”、“170750美元”]，
[“Ashton Cox”，“初级技术作者”，“旧金山”，“1562”，“2009/01/12”，“86000美元]，
];
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（）；
})

---

您可以使用

.appendTo（$（column.header（））.empty（））

替换列标题的内容。您还可以在

initComplete

-回调中添加eventlisteners，并将其直接附加到输入

const数据集=[
[“老虎尼克松”、“系统架构师”、“爱丁堡”、“5421”、“2011/04/25”、“320800美元”]，
[“Garrett Winters”、“会计师”、“东京”、“8422”、“2011/07/25”、“170750美元”]，
[“Lorem ipsum”、“会计师”、“爱丁堡”、“1562”、“2011/07/25”、“86000美元”]，
[“Ashton Cox”，“初级技术作者”，“旧金山”，“1562”，“2009/01/12”，“86000美元]，
];
const dataTable=$（“#示例”）.dataTable({
数据：数据集，
dom：‘t’，
列：['Name'，'Job Title'，'Location'，'Id'，'Hire Date'，'Salary']({
标题：标题
})),
initComplete:函数（）{
this.api（）.columns（）.every（函数（）{
让column=this；
让我们选择=$（'All'）
.appendTo（$（column.header（））.empty（））
.on（'更改，单击'，功能（e）{
e、 停止传播（）；
让val=$.fn.dataTable.util.escapeRegex（$（this.val（））；
column.search（val？“^”+val+“$”：“”，true，false）.draw（）；
});
column.data（）.unique（）.sort（）.each（函数（d，j）{
选择。追加（“”+d+“”）
});
});
}
});

您可以用自定义的
节点替换默认值，如下所示：
const数据集=[
[“老虎尼克松”、“系统架构师”、“爱丁堡”、“5421”、“2011/04/25”、“320800美元”]，
[“Garrett Winters”、“会计师”、“东京”、“8422”、“2011/07/25”、“170750美元”]，
[“Ashton Cox”，“初级技术作者”，“旧金山”，“1562”，“2009/01/12”，“86000美元]，
];
const dataTable=$（“#示例”）.dataTable({
数据：数据集，
dom：‘t’，
订购：错，
列：['Name'，'Job Title'，'Location'，'Id'，'Hire Date'，'Salary'].map（header=>（{Title:header}）），
initComplete:function（）{
const table=this.api（）；
table.columns（）.every（函数（））{
//获取初始列标题
常量标题=$（this.header（））.text（）；
//将标头替换为节点
$（this.header（））.html（`${title}（All）`）；
//将唯一的排序列值抓取到节点中
const options=this.data（）.unique（）.sort（）.toArray（）.reduce（（选项，项）=>options+=`${item}`，''；
//有选择的人口
$（this.header（））.find（'select'）.append（options）；
});
}
});
//根据选项选择过滤
$（'#示例'）。on（'change'，'thead-select'，event=>dataTable.column（$（event.target）.closest（'th'））。search（$（event.target）.val（））.draw（）

标题缺失，我们必须显示列名称如何显示标题和标题下方的“显示”下拉列表？这是有史以来最有希望的答案！再次感谢你。