javascript - 如何在数据表jquery中添加除操作列之外的列过滤

Question

我是 jQuery 和 javascript 新手。所以我无法找到解决方案。我正在使用gentelella alela template's default example data table 。我想向除操作列之外的每一列添加列过滤器。我得到了这个link 。所以我尝试添加页面上给出的 js ，如下所示。

<script>
    $(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#datatable thead tr').clone(true).appendTo( '#datatable thead' );
    $('#datatable thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search( this.value )
                    .draw();
            }
        } );
    } );

    // var table = $('#datatable').DataTable( {
    //     orderCellsTop: true,
    //     fixedHeader: true
    // } );
} );

    </script>

在上面的代码中，我评论了一些代码，因为它给了我 this错误警报。

现在使用上面的代码我得到的结果如下图所示:

使用上面的代码，它无法从文本输入中进行搜索(它的命中排序)。它也在搜索行上显示排序。另外，我不想在“操作”列上进行搜索。

我的问题是:

1. 列搜索不起作用。当我点击列搜索的输入字段时，它会对内容进行排序。

2. 我不希望对列搜索行进行排序。除“操作”列外，每列只需要搜索框。

3. 操作列不应有搜索框。

如何实现数据表中除Action列之外的列过滤？

请帮忙。提前致谢。

表结构:

<table id="datatable" class="table table-striped table-bordered" style="width:100%;">
                    <thead>
                      <tr>
                        <th>Category Name</th>
                        <th>Status</th>
                        <th>Action</th>

                      </tr>
                    </thead>


                    <tbody>
                      @if(count($category) >= 1)
                      @foreach ($category as $cat)
                      <tr>
                        <td>{{$cat->category_name}}</td>
                        <td>
                          @if($cat->is_active == 1)
                          <span class="tag-success">Active</span>
                          @elseif($cat->is_active == 0)
                          <span class="tag-danger">Inactive</span>
                          @endif
                        </td>
                        <td>
                          @if($cat->is_active == 1)
                          <a href="{{route('category.edit', $cat->category_id)}}" class="tableIcons-edit"
                            data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i
                              class="fa fa-pencil-square-o"></i></a>&nbsp;
                          <a href="{{route('categoryInactivate', $cat->category_id)}}" class="tableIcons-inactive"
                            data-toggle="tooltip" data-placement="top" title="" data-original-title="Inactivate"
                            ><i class="fa fa-thumbs-down"></i></a> 
                          @elseif($cat->is_active == 0)
                          <a href="{{route('categoryActivate', $cat->category_id)}}" class="tableIcons-active"
                            data-toggle="tooltip" data-placement="top" title="" data-original-title="Activate"
                            ><i class="fa fa-thumbs-up"></i></a>
                          @endif
                        </td>

                      </tr>
                      @endforeach
                      @else
                      <p>No records found!</p>
                      @endif
                    </tbody>
                  </table>

Answer 1

您需要稍微更改一下代码并为其添加一个条件。

$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example1 thead tr').clone(true).appendTo( '#example1 thead' );
$('#example1 thead tr:eq(1) th').each( function (i) {

    var title = $(this).text();
    if(title != 'Action'){
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

    $( 'input', this ).on( 'keyup change', function () {
        if ( table.column(i).search() !== this.value ) {
            table
                .column(i)
                .search( this.value )
                .draw();
        }
    } );
}
}
);

 var table = $('#example1').DataTable( {
     orderCellsTop: true,
    fixedHeader: true
 } );
});