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错误警报。

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

使用上述代码的

无法从文本输入中搜索（按排序）。其在搜索行上的显示排序也是如此。另外，我也不想在“操作”列上进行搜索。

我的问题是：

列搜索不起作用。当我点击列搜索的输入字段时，它会进行排序。
我不希望对列搜索行进行排序。除“操作”列外，每个列只需要搜索框。
操作栏不应有搜索框。

除数据表中的“操作”列外，如何实现列过滤？

请帮助。预先感谢。

表结构：

<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
 } );
});

Answer 2

如果您对此问题的第一个已接受答案进行编码，您将仅删除搜索输入，但“操作”一词仍将出现在该行中，因此您必须向该行添加一个 else 子句如果阻止。最终代码可能如下所示：

    $(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();
        }
    } );
} else $(this).text('');
}
);

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

由于克隆的标题行，else 子句将删除不需要的词“Action”。注意：这不是最好的解决方案，只是一种。

Answer 3

您可以在Datatable函数中插入它：

columnDefs：[{目标：[2]，可排序：false，}，]，

请参阅此链接： https://datatables.net/forums/discussion/21164/disable-sorting-of-one-column

您还可以删除对操作的搜索过滤：

$('#datatable thead tr:eq(1) th').each( function (i) {
    var title = $(this).text();
    if (i != 2) {
       $(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();
           }
       } );
   }} );

如何在除操作列

3 个答案: