Scroll is not allowing overwrite of footer elements

CenterFound

Without the scrollX & scrollY parameters, the footer elements are successfully replaced with input boxes, allowing me to perform a column by column search. Once these parameters are included, the footer loses the input boxes.

I'm have this currently on http://live.datatables.net/sojeluju/1/edit

$(document).ready( function () {
var table = $('#example').DataTable({
"sPaginationType" : "full_numbers",
"ajax": "/examples/server_side/scripts/server_processing.php",
"processing" : true,
"serverSide" : true,
"fixedHeader" : true,
"lengthMenu" : [[10, 25, 50, 100, 200, -1],[10,25,50,100, 200, "All"]],
"pageLength" : 25,
"sScrollX" : "110%",
"sScrollY" : "600px",
"bScrollCollapse": true,
"columnDefs": [
{ "type": "signed-num", "targets": 3}
]
});

        $('#example tfoot th').each(function() {
           var title = $('#example thead th').eq($(this).index()).text();
           console.log(title);
           $(this).html('<input type="text" placeholder="Search ' + title + '"/>');
       });
       table.columns().every(function () {
           var datatableColumn = this;
           $(this.footer()).find('input').on('keyup change', function() {
               datatableColumn.search(this.value).draw();
           });
       });                                           

} );

kthorngren

I think you need to put this code before your Datable initialization:

$('#example tfoot th').each(function() {
    var title = $('#example thead th').eq($(this).index()).text();
    console.log(title);
    $(this).html('<input type="text" placeholder="Search ' + title + '"/>');
});

Kevin

CenterFound

Thank you!! That was the key. Appreciate the assist.