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