columns.adjust() not working properly

grud

Hi!

Tried to use table.columns.adjust() - https://datatables.net/reference/api/columns.adjust()

Works properly on column width adjust BUT it break column search and pagination. If I delete my codeblock about search - it works ok. Need to get it work with all column search etc. Have any ideas?

<script>
    $(document).ready(function() {
            
    // Setup - add a text input to each footer cell
    $('#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="Search '+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,
    } 
    );
} );
</script>

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

grud

Test case - live.datatables.net/bokecaya/1/edit?html,js

Search works, but columns.adjust() not. If i delete search code block (JS), it start working. I think problem may be here, because this script draws table too?

            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search( this.value )
                    .draw();
            }

kthorngren

First suggestion is to initialize Datatables after building the search inputs. This way you won't clone the sorting evetns.

The width of your search inputs is affecting the results of columns.adjust(). You can use this CSS to change the input widths:

thead input {
  width: 100%;
}

See the updated example:
http://live.datatables.net/xehetoxe/1/edit

Kevin

grud

Thank you very much! Finally understand where been problem.