how to put column names and individual column search boxes in header and scroll bar in footer ?

karam

https://datatables.net/examples/basic_init/scroll_x.html

https://datatables.net/examples/api/multi_filter.html

from above two examples i got some code but columns search boxes are overlapping by scroll in footer.
i want to put search boxes and titels in header and scroll bar in footer . how can i do it by using these two examples
?

code:

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

// DataTable
var table = $('#example').DataTable( "ScrollX": "100%");

// Apply the search
table.columns().every( function () {
    var that = this;

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

} );