Javascript 数据表按组搜索和筛选？

我使用的是DataTables，我也在对表进行分组。第一列是和ID，可以忽略。我使用select输入为用户提供筛选表的可能性

但是，由于没有人需要按id进行筛选，我想让用户也可以按组进行筛选。这意味着我必须用组替换id select输入的选项值，并在选择id列上的下拉列表时过滤组而不是id

我希望你们能抓住我。 我只想用可用组替换第一个选择选项值，并提供按组过滤的可能性

以下是我的表格示例：

var表；
var-groupColumn=1；
$（文档）.ready（函数（）{
表=$（“#联系人_概览_表”）。数据表({
“显示开始”：0，
“语言”：{
“url”：”https://cdn.datatables.net/plug-ins/1.10.19/i18n/German.json"
},
“columnDefs”：[{
“可见”：假，
“目标”：groupColumn
}],
“命令”：[
[groupColumn'asc']
],
“处理”：对，
“页面长度”：25，
“drawCallback”：函数（设置）{
var api=this.api（）；
var rows=api.rows({
页面：“当前”
}).nodes（）；
var last=null；
api.column（groupColumn{
页面：“当前”
}).data（）.each（函数组，i）{
如果（最后！==组）{
$（行）.eq（i）.之前(
''+组+''
);
last=组；
}
});
},
initComplete:function（）{
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）{
选择。追加（“”+d+“”）
});
});
},
});
//按分组排序
$（“#联系人_概述_表tbody”）。在（'click'，'tr.group'，function（）上{
var currentOrder=table.order（）[0]；
if（currentOrder[0]==groupColumn&¤tOrder[1]===asc'）{
table.order（[groupColumn'desc']）.draw（）；
}否则{
table.order（[groupColumn'asc']）.draw（）；
}
});
});

身份证件
艺术
称呼
滴度
沃名称
名称
菲尔马
斯特拉伊
奥特
美孚石油
行动
1.
顾客
波尔夫
马克斯
穆勒
柏林
+21 431 8912
行动
2.
顾客
提姆
看见
斯德哥尔摩
+44 123 5763
行动
1.
供应商
博士
菲利普
纽约
+49 241 4513
行动
2.
供应商
马克斯
色调
洛杉矶
+44 124 1341
行动
身份证件
艺术
称呼
滴度
沃名称
名称
菲尔马
斯特拉伊
奥特
美孚石油
行动
您需要首先识别分组列的索引，然后将值附加到ID列，就像按组过滤一样，您需要它的索引

要更新选择选项，您需要使用API，然后在
draw
事件中清空选择选项值，然后将其与过滤后的值一起追加


var表；
var-groupColumn=1；
$（文档）.ready（函数（）{
表=$（“#联系人_概览_表”）。数据表({
“显示开始”：0，
“语言”：{
“url”：”https://cdn.datatables.net/plug-ins/1.10.19/i18n/German.json"
},
“columnDefs”：[{
“可见”：假，
“目标”：groupColumn
}],
“命令”：[
[groupColumn'asc']
],
“处理”：对，
“页面长度”：25，
“drawCallback”：函数（设置）{
var api=this.api（）；
var rows=api.rows({
页面：“当前”
}).nodes（）；
var last=null；
api.column（groupColumn{
页面：“当前”
}).data（）.each（函数组，i）{
如果（最后！==组）{
$（行）.eq（i）.之前(
''+组+''
);
last=组；
}
});
},
initComplete:function（）{
var表=此；
this.api（）.columns（）.every（函数（））{
var列=此；
变量选择=$（“”）
.appendTo（$（column.footer（））.empty（））
.on（'change'，function（））{
var val=$.fn.dataTable.util.escapeRegex(
$（this.val（）
);
if（column.index（）==0）{
column.column（[1]）.search（val？“^”+val+“$”：“”，true，false）
.draw（）
}否则{
console.log（列）
柱
.search（val？“^”+val+“$”：“”，true，false）
.draw（）；
}
});
if（column.index（）==0）{
this.column（[1]）.data（）.unique（）.sort（）.each（函数（d，j）{
选择。追加（“”+d+“”）
})；//column.data
}否则{
column.data（）.unique（）.sort（）.each（函数（d，j）{
选择。追加（“”+d+“”）
})；//column.data
}
});
},
});
表.on（'draw'，function（）{
table.columns（）.index（）.each（函数（idx）{
var select=$（table.column（idx.footer（））.find（'select'）；
如果（选择.val（）==''&&idx！==0）{
选择
.empty（）
.附加（“”）；
表.第列（idx{
搜索：'已应用