Filter DropDown Values DataTables

[GaurangDhorda]

StackBllitz Demo

in this demo I am filter table data using table footer.. and table body has one column called dropdowns. I want to filter out all selected values in column when filter out by. but it will not work, if you disable app.component.html line no 39 select then every thing working fine. How can filter searching inside dropdown values ? So why that.search() not working for select values.

[shanmukhateja]

So, if I understand correctly, you're trying to trigger table search from <select> on the table's footer but I do not understand why you're including another <select> element inside <td> node? Please explain.

[shanmukhateja]

I don't know why it refuses to work when using <option>. @l-lin if you're free, could you take a look?

[l-lin]

So why that.search() not working for select values.

That's because the content of your column is not just values, but the whole HTML select content.

This discussion in DataTables forum may help you.

[GaurangDhorda]

@l-lin Thank You for your kind attention. Then How can we search inside whole HTML select content ? Can you provide any example code to do it ? How can we do the same in angular ? inside ngAfterViewInit()

[l-lin]

One way is to use the search API with regex to find out the selected value in your list.

[GaurangDhorda]

@l-lin https://stackblitz.com/edit/drop-down-population-q5hqit?file=app%2Fapp.component.ts as shown in this example if you check app.component.ts line number of 112 then, regex not detecting when we select value from footer @shanmukhateja and if we type value in 3rd input-box inside footer of table than it will search for dropdown column too, if you type superman, then it will also filter out select column of table too. But same is not working when I select value inside footer select