Multiple data tables individual column filters are not working

Angular DataTables with Angular way, Multiple data tables filters are not working, only one table working.

I have two tables, and different API's data. Im trying to implement individual column filters. Only one table is working, second table unable to do filtering. Any suggestion pls...

ngAfterViewInit(): void {
this.datatableElementList.forEach(datatableElement=>{
this.dtTrigger1.subscribe(() => {
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.columns().every(function () {
const that = this;
$("input", this.footer()).on("keyup change", function () {
if (that.search() !== this["value"]) {
that.search(this["value"]).draw();
}
});
});
});
});
this.dtTrigger2.subscribe(() => {
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.columns().every(function () {
const that = this;
$("input", this.footer()).on("keyup change", function () {
if (that.search() !== this["value"]) {
that.search(this["value"]).draw();
}
});
});
});
});
});
}


Stackblitz

Continue reading...