how to add column filtering in datatable jquery except action column

Question

I am new to jQuery and javascript. So I am not able to find solution. I am using gentelella alela template's default example data table. I want to add column filter to each column except action column. I got this link. So I tried to add js given on my page like below.

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

In above code I commented some code because it was giving me this error alert.

Now with above code I am getting result as below image:

with above code its not able to search from the text inputs(its hitting sorting). its showing sorting on search row also. Also I don't want search on Action column.

My problems are:

1. Column searching is not working. When I hit on input field of column search, its sorting things.

2. I am not expecting sorting on column search row. need only search boxes for each column except Action column.

3. There should no search box for action column.

How do I achieve column filtering except Action column in datatable?

Please help. Thanks in advance.

Table structure:

<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

You need to change your code a little bit and add a condition to it.

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

If you code the first accepted answer to this question, you will only remove search input but the word 'Action' will still appear in the row, so you have to add an else clause to the if block. The final code could look like this:

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

The else clause will remove the undesired word 'Action' because of the cloned header row. Note: this is not the best solution, it's just one.

Answer 3

You could insert this on Datatable function:

columnDefs: [ { targets: [ 2 ], orderable: false, }, ],

refer to this link: https://datatables.net/forums/discussion/21164/disable-sorting-of-one-column

also you could remove search filtering on action:

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