second header hides when scrollX function uses

muthu32

I have long horizontall scrollable table with two header.One header is for sorting purpose.Another header is for searching purpose below first header which contains input boxes.
My problem is when I use scrollX function second header is not displayed and alignment changes.
when i use single thead, then scrolling arrow passed to second thead, this becomes difficult to sorting because second thead contains searching box.How can I show two table heads and scrolling arrow on first thead.
Debug url: http://debug.datatables.net/oxuyut
and my code

$(document).ready(function() {
var dataTable = $('#arbet-grid').DataTable( {
processing: true,
serverSide: true,
"ajax":{
url :"ajax_arbet_data.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
alert('Error found');
}
}, fixedColumns: {
leftColumns: 1
},
"scrollY": 300,
"scrollX": true
} );
$("#arbet-grid_filter").css("display","none"); // hiding global search box
$('.search-input-text').on( 'keyup click', function () { // for text boxes
var i =$(this).attr('data-column'); // getting column index
var v =$(this).val(); // getting search input value
dataTable.columns(i).search(v).draw();
} );
$('.search-input-select').on( 'change', function () { // for select box
var i =$(this).attr('data-column');
var v =$(this).val();
dataTable.columns(i).search(v).draw();
} );
} );