How to search inside html element of td with datatable individual column searching

gopi_123

<table id='example1'>
    <thead>
        <th>Name</th>
        <th>Type</th>
    <thead>
    <tfoot>
        <th>Name</th>
        <th>Type</th>
    </tfoot>
    <tbody>
        <tr>
           <td>
              <a data-toggle="tooltip" data-html="true" data-placement="right" title="<h1>My Name in tooltip</h1>">
              <span class="text-green"> ABCD name123</span>
              </a>
           </td>
           <td>
              <a data-toggle="tooltip" data-html="true" data-placement="right" title="<h1>Type in tooltip</h1>">
              <span  class="text-green"> Type for ABCD name123 is xyz </span>
              </a>
           </td>
        </tr>
               <tr>
           <td>
              <a data-toggle="tooltip" data-html="true" data-placement="right" title="<h1>My Name in tooltip</h1>">
              <span class="text-green"> test me123</span>
              </a>
           </td>
           <td>
              <a data-toggle="tooltip" data-html="true" data-placement="right" title="<h1>Type in tooltip</h1>">
              <span  class="text-green"> Type for test name123 is 567* * </span>
              </a>
           </td>
        </tr>
    <tbody> 
</table>

I have written the below code to add enable searching for each column.

                                    $(document).ready(function() {
                                            $('#example1 tfoot th').each( function () {
                                                var title = $(this).text();
                                                $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
                                            });
                                            var table = $('#example1').DataTable({
                                                 "autoWidth":false,"paging": false,"bInfo" : false,
                                                 initComplete: function () {
                                                    this.api().columns().every( function (d, j) {
                                                        var that = this;
                                                        $( 'input', this.footer() ).on( 'keyup change', function () {
                                                            if ( that.search() !== this.value ) {
                                                                that.search( this.value ).draw();
                                                            }
                                                        } );
                                                    } );
                                                }
                                            });
                                     });

With the above code, if I search "tooltip" it returns all rows. I don't want to search HTML of <td> but i want filter rows based on value inside <span class="text-green">.

How can i serach text inside html <span> element which is inside html <a data-toggle>.

colin

Probably the easiest way would be to strip out the HTML for all render types (i.e. order and filter) except display - that way the HTML is drawn but doesn't affect the other operations - see example here: http://live.datatables.net/lafagosi/21/edit

Colin