Filtering with html content

I am trying to put a select filter on a column with html content.

The filter finds the id's of the html strings but the table shows no records once I select a value in the filter.

See example here: http://live.datatables.net/rabesuta/1/edit?html,js,output

relevant td content

<td><i id="Yes" class="fa fa-circle" style="color:green;font-size:20px;"></i></td>

yadcf setup:

 yadcf.init(table,[   
         {
           column_number: 0, 
           column_data_type: 'html', 
           html_data_type: 'id'            
         }
  ]);

Solution

Its not really related to yadcf, but rather to datatables itself,

If you will feed the global datatables filter with the word No or Yes it wont show you any results - because it seems that it not looking inside the html attributes,

So what you can do is placing a hidden html element inside yours (with your desired serach value enclosed, like this

<td>
    <i id="No" class="fa fa-circle" style="color:red;font-size:20px;">
        <span class="hide">No</span>
    </i>
</td>

with the following css

.hide {
  display: none;
}

and everything will work as expceted, see working sample

and you can even reduce your html and yadcf setup by removing the ids from the html and using a more simple yadcf setup, see working sample N#2

relevant code:

<td>
    <i class="fa fa-circle" style="color:red;font-size:20px;">
        <span class="hide">No</span>
    </i>
</td>


 yadcf.init(table,[   
         {
           column_number: 0, 
           column_data_type: 'html'
         }
  ]);