Removing Column Filter on Specified Column

Treq4950

I was interested in adding search by text input for each column, and now have the need to remove search for the last columns, as they will be needed for editing and removing certain rows. I've tried using https://datatables.net/reference/option/columnDefs but I'm pretty sure this won't help me, as trying to target specific columns removes searchability all together. Maybe my attempts are incorrect and I'm on the right track, but it doesn't seem that way. Any help would be greatly appreciated!

I've use the code below which works, but from this point would like to remove searchability on the last columns:

        $(document).ready(function() {
    $('#example thead tr').clone(true).appendTo( '#example thead' );
    $('#example thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="'+title+'" />' );
 
        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search( this.value )
                    .draw();
            }
        } );
    } );
 
    var table = $('#example').DataTable( {
        
        orderCellsTop: true,
        fixedHeader: true
    } );
} );

Treq4950

https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html
Also, the code is from this link, and visually it looks the same. My goal is to remove the search input box on, let's say, the last column.

Treq4950

This is a slightly different implementation, with only one header row.

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example thead th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="'+title+'" />' );
    } );
 
    // DataTable
    var table = $('#example').DataTable({
        initComplete: function () {
            // Apply the search
            this.api().columns().every( function () {
                var that = this;
 
                $( 'input', this.header() ).on( 'keyup change clear', function () {
                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                } );
            } );
        }
    });

kthorngren

You can do this using class names in the header. See this thread for a similar question.

Kevin

Treq4950

I actually manged to go around this by setting an index and adding an if statement.