column level search in thead has issue with sorting

alamnaryab

Note: it is server side processing dt
I have displayed column level searchboxes in second row of thead using below code

$('.sdt thead tr').clone(true).appendTo( '.sdt thead' );
$('.sdt thead tr:eq(1) th').each( function (i) {
    var title = $(this).text();
    if($.inArray(title,["Delete","actions"])){

        $(this).html( '<input type="text" class="form-control p-1 txtDtFilter w-100"  placeholder="Search '+title+'" />' );

        $( 'input', this ).on( 'keyup change', function () {
            if ( sdt.column(i).search() !== this.value ) {
                sdt
                    .column(i)
                    .search( this.value )
                    .draw();
            }
        } );
    }
} );

but the sorting icons are removed from first tr and it is appearing in second tr at right side of each search input
when I click any column level searchbox to find anything, it also trigers sorting.

Also I noticed with above code the colVis dropdown also got broken

tangerine

You need orderCellsTop:
https://datatables.net/reference/option/orderCellsTop