如何在数据表 jquery 中添加列过滤，操作列除外

Question

我是 jQuery 和 javascript 的新手。所以我无法找到解决方案。我正在使用 gentelella alela template's default example data table. I want to add column filter to each column except action column. I got this 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 错误警报。

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

使用上面的代码无法从文本输入中搜索（它的命中排序）。它也在搜索行上显示排序。我也不想在 Action 列上搜索。

我的问题是：

列搜索不工作。当我点击列搜索的输入字段时，它正在排序。
我不希望在列搜索行上进行排序。只需要为操作列以外的每一列搜索框。
操作栏不应该有搜索框。

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

请帮忙。提前致谢。

Table结构：

<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

您可以在 Datatable 函数中插入：

columnDefs: [ { 目标: [ 2 ], 可订购: false, }, ],

参考这个link： 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();
           }
       } );
   }} );

Answer 2

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

$(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 3

如果您对这个问题的第一个被接受的答案进行编码，您将仅删除搜索输入，但单词 'Action' 仍会出现在该行中，因此您有将 else 子句添加到 if 块。最终代码可能如下所示：

    $(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'，因为克隆了 header 行。注意：这不是最好的解决方案，它只是一个。

如何在数据表 jquery 中添加列过滤，操作列除外

how to add column filtering in datatable jquery except action column

javascript

jquery

datatables

filtering

gentelella