数据表的列过滤不支持<a href=""> tag?

Question

Is there a workaround for Datatables' support for a href tags inside column filter?

I initialize Datatables like so:

        $(document).ready(function() {
    $('#sortable').DataTable({
      "stateSave": false,
      initComplete: function () {
              this.api().columns('.select-filter').every( function () {
                  var column = this;
                  var select = $('<select><option value=""></option></select>')
                      .appendTo( $(column.footer()).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 ) {
                      select.append( '<option value="'+d+'">'+d+'</option>' )
                  } );
              } );
          }
  });
} );

But one of the columns I'm filtering has href tags like:

<table class="table-striped table-condensed" id="sortable">
<thead>
<tr>
<th></th>
<th>Src_id</th>
<th>Element_name</th>
<th>Src_type_id</th>
<th class="select-filter">Subcontract_id</th>
<th class="select-filter">Language_id</th>
<th class="select-filter">Site_id</th>
<th class="select-filter">Costcentre_id</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
@foreach($elements as $key => $value)
 <tr>
        <td width="10px"><input type="checkbox" name="ids_to_edit[]" value="{{$value->src_id}}" /></td>
            <td>{{ $value->src_id }}</td>
            <td><a href="#" class="testEdit" data-type="text" data-column="element_name" data-url="{{route('elements/update', ['src_type_id'=>$value->src_type_id, 'src_id'=>$value->src_id])}}" data-pk="{{$value->src_id}}" data-title="change" data-name="element_name">{{$value->element_name}}</a></td>
            <td>{{ $value->src_type_id }}</td>
            <td>{{ $value->subcontract }}</td>
            <td><a href="#" class='testEdit2' data-column="language_id" data-url="{{route('elements/update', ['src_type_id'=>$value->src_type_id, 'src_id'=>$value->src_id])}}" data-pk="{{$value->src_id}}" data-title="change" data-name="language_id">{{ $value->language }}</a></td>
            <td>{{ $value->site }}</td>
            <td>{{ $value->costcentre }}</td>
</tr>
@endforeach
</tbody>
</table>

Unfortunately they show like this:

Answer 1

解

将DataTables初始化代码更改为：

var table = $('#example').DataTable({
    columnDefs: [
       // Indicate that first column contains HTML
       // to have HTML tags removed for sorting/filtering
       { targets: 0, type: 'html' }
    ],
    initComplete: function () {
        this.api().columns().every( function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.footer()).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 ) {
               // For first column
               // ignore HTML tags 
                if(column.index() == 0){ d = $(d).text(); }

                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    }
} );    

样本

请参阅this jsFiddle以获取代码和演示。