DataTable sorting with a select by html content

Cracs

I have a dataTable with custom filters on each columns. In the body of some columns I have some html with icons like this (Sorry I didn't arrive to use Code preview) :

<tbody>
<tr>
<td><i class="fa fa-retweet" data-search="test" data-order="test" aria-hidden="true"></i></td>
<td>Other column</td>
<td>Other column</td>
</tr><tr>
<td><i class="fa fa-calendar" data-search="cal" data-order="cal" aria-hidden="true"></i></td>
<td>Other column</td>
<td>Other column</td>
</tr><tr>
<td><i class="fa fa-cogs" data-search="co" data-order="coemphasized text" aria-hidden="true"></i></td>
<td>Other column</td>
<td>Other column</td>
</tr>
</tbody>

The filter of the first column is an HTML select with several icons in options, when I select one option, it's return me a value equal to one of the data-search present on each line in column 1.

For exemple I choose icon fa-calendar in the select box (value is cal), I just want to show the line where there is class fa-calendar or data-search="cal"

I tried to use the dataTable.search with the value but it's doesn't work :

myDatatable.column(1).search(value).draw();

To finish, I used columnDefs, to set HTML type to my column :

columnDefs: [{ targets: 1, type: "html" }],

Is there someone who already tried to set a filter who sorts column by one of the html attributepresent in the column body ?

Thanks

lucaslm

Here, a working example:

https://plnkr.co/edit/uxjcpk?p=preview

You're welcome