Filter footer vanishes on adding sticky header with scroll

emily16

Here is my code - https://jsfiddle.net/w6vytssh/2/
My table

The first image shows the footer(containing the filter option for each column) in the empty table.
But when I get the data the footer is missing and is replaced by the header at the bottom. (pic 2)

I used "scrollY": 400,
"scrollX": true,
"bScrollCollapse" : true,
to make the header sticky and scrollable but that leads to the actual footer being hidden and replaced by the sticky footer(a copy of the header)
Please note that the jsfiddle link would not render everything properly since some resources are missing.
How can I fix this?