How to filter from jQuery Datatable column with another element inside

I am using Datatable filter using select input, but I am getting 0 rows for the column that has link inside.

here's my HTML

       <table class="table table-bordered mytable">
            <thead class="reg_bg">
              <tr>
                  <th scope="col">column1</th>
                  <th scope="col">column2</th>
                  <th scope="col">column3</th>
                  <th>Action</th>
               </tr>
               </thead>
               <tbody>
                 {% for row in my_data %}
                    <tr class="">
                        <td>{{ forloop.counter }}</td>
                        <td title="{{row.description}}">
                            {{row.title}} 
                        </td>
                        <td>
                            <a href="#" data-qid="{{row.id}}" data-toggle="modal" data-target="#myModal">
                                {{row.author}}</a>
                        </td>
                        <td>
                            <a href="{% url 'book_detail' row.id %}">
                                <button type="button" class="btn btn-primary">Detail</button>
                            </a>
                        </td>

                    </tr>
                 {% endfor %}
                 </tbody>
          </table>

and here's my jquery datatable

$('.mytable').DataTable({
        "aLengthMenu":[[5,10,25,50,100,-1],[5,10,25,50,100,"All"]],
        "iDisplayLength":5,
        "initComplete": function () {
            $(this).find('thead tr').clone().find('th').each(function() {
                    while(this.attributes.length > 0) {
                        this.removeAttributeNode(this.attributes[0]);
                    }
              }).empty()
              .wrapAll('<tr/>').parent()
              .appendTo($(this).find('thead'));

            var current_table_head=$(this).find('thead');
            this.api().columns("th:not(:contains('Action'))").every( function () {
                var column = this;
                var select = $('<select style="width:100%;"><option value="">All</option></select>')
                    .appendTo( current_table_head.find("tr:eq(1) th").eq(column.index()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    var val = $('<div/>').html(d).text();
                    select.append($('<option>').val(val).text(val))
                } );
            } );
        }
    });

so it displays only text in filter dropdown, not the whole elem inside . But when I filter it there are no rows displayed in the table.

Here's JsFiddle. For the 3rd column data is not getting filtered.

Anyone please help me with this. Thanks.