1

我是 jQuery 和 javascript 的新手。所以我无法找到解决方案。我正在使用gentelella alela 模板的默认示例数据表。我想将列过滤器添加到除操作列之外的每一列。我得到了这个链接。所以我尝试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>

在上面的代码中，我注释了一些代码，因为它给了我这个错误警报。

现在使用上面的代码，我得到如下图所示的结果： 在此处输入图像描述

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

我的问题是：

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

3 回答 3

0

如果您编写此问题的第一个接受答案，您只会删除搜索输入，但“Action”一词仍会出现在行中，因此您必须在 if 块中添加 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”。注意：这不是最好的解决方案，它只是一个。

于 2021-07-29T17:05:42.377 回答
-1

您可以将其插入 Datatable 函数：

columnDefs: [ { 目标: [ 2 ], orderable: 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();
           }
       } );
   }} );
于 2019-12-13T08:04:55.600 回答
-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
 } );
});
于 2019-12-13T08:15:22.897 回答