修复数据表的列过滤下拉列表中的HREF标记

时间:2016-09-15 17:50:38

标签: javascript jquery datatables

我正在使用Bootstrap X-Editable进行内联编辑CRUD。我碰巧将它与Datatables结合使用,它就像一个魅力,直到我需要在一个具有x可编辑下拉列的列上添加过滤选项。

基本上,表格如下:

<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>

并且语言ID列的初始化为:

$('.testEdit2').editable({
    type: 'select',
    source: [
    <?php foreach($languages as $key => $value){ ?>
        {value: <?php echo $value->language_id; ?>, text: '<?php echo $value->language; ?>'},
    <?php } ?>
    ],
    params: function(params) {
        // add additional params from data-attributes of trigger element
        params.name = $(this).editable().data('name');
        return params;
    },
    error: function(response, newValue) {
        if(response.status === 500) {
            return 'Server error. Check entered data.';
        } else {
            return response.responseText;
            // return "Error.";
        }
    }
 });

不幸的是,Datatables的列过滤器显示如下:

enter image description here

我发现它几乎包含了整个href标签:

enter image description here

我想知道如何清除此初始化以删除<a href></a>标记。

    $(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>' )
                  } );
              } );
          }
  });
} );

0 个答案:

没有答案