JS, filter datatables in header

Question

Currently I have filter in footer of table(tfoot), I want it moved to header and I can't resolve this issues.

$('.input-col').each( function () {
            var title = $(this).text();
            if (!$(this).hasClass('skip')) {
                $(this).html( '<input class="form-control form-control-sm" type="text" placeholder="'+ title + '" />' );
            }
        } );
        $('#dt').DataTable( {
            /* Started column */
            "order": [[ 9, "desc" ]],
            "pageLength": 10,
            "lengthMenu": [10, 15, 20, 25, 30, 35, 50],
            "lengthChange": true,
            "searching": true,
            "paging":   true,

            stateSave: true,
            initComplete: function () {
                // Apply the search
                this.api().columns().every( function () {
                    var that = this;
                    $( 'input' ).val(that.search()).on( 'keyup change clear', function () {
                        if ( that.search() !== this.value ) {
                            that
                                .search( this.value )
                                .draw();
                        }
                    } );
                } );
            }

On line: $( 'input' ).val(that.search()).on( 'keyup change clear', function () before it was $( 'input' , this.footer())...., I tried with this.header() but it doesn't work as expected. Datatable is in form of:

<div class="table-responsive">
            <table id="dt" class="table table-striped table-sm">
                <thead class="thead-light">
                    <tr>
                        <th class="input-col skip" scope="col" style="width:3%"></th>
                        <th class="input-col skip" scope="col" style="width:3%"></th>
                        <th class="input-col skip" scope="col" style="width:3%"></th>
                    </tr>
                </thead>
...