Sort Arrow Icons Position

Hi,

I have been using dataTables for a few months now and am really impressed with its capabilities.

For the dataTable I am working on currently I have activated the column sort in addition to a drop down filter for the header and a textbox filter for the footer.

Everything works but I would like to move the position of the sort arrows as they are clicked/activated every time the drop down filter is clicked - which is not ideal from a usablility point of view.

I can move the drop down filter boxes using the 'orderCellsTop: false' attribute, but the sort arrow icons also move with the drop down boxes.

I found the following solution which puts the drop down boxes in a custom css class (.filterhead) but this then creates a ghost row in the table and stops the footer filters from working.

$(".filterhead").each( function ( i ) {
    var select = $('<select><option value=""></option></select>')
        .appendTo( $(this).empty() )
        .on( 'change', function () {
               var term = $(this).val();
            table.column( i ).search(term, false, false ).draw();
        } );
         table.column( i ).data().unique().sort().each( function ( d, j ) {
            select.append( '<option value="'+d+'">'+d+'</option>' )
        } );
    } );

I have been searching for a solution for quite a while, both CSS and dataTables, but unfortunately I cannot find one.

I am using the Bootstrap4 css theme.

Here is my dataTables code -

$(document).ready(function () {

    // Setup - add a text input to each footer cell
    $('#searchResults tfoot th').each( function () {
        var title = $('#searchResults thead th').eq( $(this).index() ).text();
        //$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
        $(this).html( '<input type="text" placeholder="Filter" />' );
    } );


    /* DC: this is for DataTables 1.12 */
    var table = $('#searchResults').DataTable( {
        "data": <?php if (count($this->data)){ echo $this->data; } else { echo "''"; } ?>,
        "paging":   true,
        "autoWidth": false,
        "stateSave": false,
        "order": [],
        "language": {
          "emptyTable": "No search results found"
        },
        "pagingType": "full_numbers",
        "searching": true,
        "scrollX": true,
        "scrollCollapse": true,
         // DC: use this initComplete setting if you want the select drop down filters to be put in the standard <thead><tr><th> cells
        "initComplete": function () { // DC: this adds the select menus at col header (can be changed to footer - just ensure there is a free <tr> in dataTable)
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.header()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        },

        "orderCellsTop": false,
        "ordering": true,
    } );

    // Restore state
    var state = table.state.loaded();
    if ( state ) {
      table.columns().eq( 0 ).each( function ( colIdx ) {
        var colSearch = state.columns[colIdx].search;

        if ( colSearch.search ) {
          $( 'input', table.column( colIdx ).footer() ).val( colSearch.search );
        }
      } );

      table.draw();
    }

    // Apply the search
    table.columns().eq( 0 ).each( function ( colIdx ) {
        $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
            table
                .column( colIdx )
                .search( this.value )
                .draw();
        } );
    } );
} );

Any help is appreciated.
Best Regards