Javascript 将元素追加到Datatable标头

我想做的是在我的datatable上的搜索栏旁边添加一个单选按钮，只允许搜索一列，Store Number

有人提到我，但我不相信这能达到我预期的效果。我找到的所有答案似乎都是在datatable的行/列中添加元素，而不是标头本身

此标题的选择器是

#store-table_wrapper

   $('#store-table').DataTable({
        "columnDefs": [{
            "targets": [7, 8],
            "visible": false,
            "drawCallback": function() {
                $('<input type="radio" name="store-number-filter-selector" />').appendTo('#store-table_wrapper');
            }
        }]
    });

$（'#存储表'）。数据表({
“columnDefs”：[{
“目标”：[7,8]，
“可见”：假，
“drawCallback”：函数（）{
$（''）.appendTo（'store-table_wrapper'）；
}
}]
});

我认为，要让单选按钮显示到一半，真正具有挑战性的部分是禁用默认搜索栏，因为您不太可能覆盖其默认行为（搜索整个表）

但是，您可以使用自己的自定义搜索栏，如以下演示中的：

//定义源数据
常数srcData=[
{id:1，名称：'apple'，类别：'fruit'}，
{id:2，名称：'raspberry'，类别：'berry'}，
{id:3，名称：'carrot'，类别：'vegie'}
];
//定义数据表对象
const dataTable=$（“#mytable”）.dataTable({
sDom:'t'，
数据：srcData，
栏目：[
{数据：'id'，标题：'id'}，
{数据：'name'，标题：'name'}，
{数据：'category'，标题：'category'}
],
//通过附加收音机修改标题节点
initComplete:function（）{
const table=this.api（）；
[1,2].forEach（column=>table.column（column）.header（）.innerHTML+=``）；
}
});
//防止在单击收音机时更改排序
$（'input.searchflag'）。在（'click'，函数（事件）{
//选择其他收音机后清除搜索
$（“#搜索字段”）.val（“”）；
dataTable.search（“”）.columns（）.search（“”）.draw（）；
event.stopPropagation（）；
});
//搜索栏键控回调
$（'#searchfield'）。在（'keyup'，function（）上{
//默认情况下，获取选中的单选按钮值或搜索整个表
设targetColumn=null；
targetColumn=$（'input.searchflag:checked'）.val（）；
如果（！targetColumn）{
dataTable.search（$（this.val（））.draw（）；
}
否则{
dataTable.column（targetColumn）.search（$（this.val（））.draw（）；
}
})

input.searchflag{
浮动：左；
}

---

我认为，要让单选按钮显示到一半，真正具有挑战性的部分是禁用默认搜索栏，因为您不太可能覆盖其默认行为（搜索整个表）

但是，您可以使用自己的自定义搜索栏，如以下演示中的：

//定义源数据
常数srcData=[
{id:1，名称：'apple'，类别：'fruit'}，
{id:2，名称：'raspberry'，类别：'berry'}，
{id:3，名称：'carrot'，类别：'vegie'}
];
//定义数据表对象
const dataTable=$（“#mytable”）.dataTable({
sDom:'t'，
数据：srcData，
栏目：[
{数据：'id'，标题：'id'}，
{数据：'name'，标题：'name'}，
{数据：'category'，标题：'category'}
],
//通过附加收音机修改标题节点
initComplete:function（）{
const table=this.api（）；
[1,2].forEach（column=>table.column（column）.header（）.innerHTML+=``）；
}
});
//防止在单击收音机时更改排序
$（'input.searchflag'）。在（'click'，函数（事件）{
//选择其他收音机后清除搜索
$（“#搜索字段”）.val（“”）；
dataTable.search（“”）.columns（）.search（“”）.draw（）；
event.stopPropagation（）；
});
//搜索栏键控回调
$（'#searchfield'）。在（'keyup'，function（）上{
//默认情况下，获取选中的单选按钮值或搜索整个表
设targetColumn=null；
targetColumn=$（'input.searchflag:checked'）.val（）；
如果（！targetColumn）{
dataTable.search（$（this.val（））.draw（）；
}
否则{
dataTable.column（targetColumn）.search（$（this.val（））.draw（）；
}
})

input.searchflag{
浮动：左；
}