Vertical Scrolling with individual search issues

Amartel

Hello,

I am new to Datatables, and I must say this is an awesome product. Unfortunately, I'm having trouble getting my tables working properly when scrollY is enabled.

What I want to have is a grid with a scrollbar and individual filters in the footer. The filters must be displayed in the footer, not the scrolling area. Right now, when I put scrollY, headers are not aligned with columns, I have to scroll to the bottom of the grid to find my filters, and they do not work. Furthermore, my headers are duplicated in the footer.

I'm using the provided code to add the filtering feature:

$(document).ready( function () {
$('#DetailBLGrid tfoot th').each( function () {
var titleDetailBL = $('#DetailBLGrid thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+titleDetailBL+'" />' );
} );
});

  // DataTable
  var tableDetailBL = $('#DetailBLGrid').DataTable();           
  //setTimeout( function () { tableDetailBL.fnAdjustColumnSizing(); }, 10 );

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

What did I do wrong?

Thanks in advance,

Andy