title: Column filters in jQuery datatable not working in fixed header
body: <p>I'd like to use Gyrocode's <a href="https://stackoverflow.com/questions/33822265/jquery-datatables-server-side-filter-column-on-top?rq=1">(see SO link)</a> excellent example of filtering columns in a datatable.  However, I'd like the column filters to be part of a fixed header.  I've added scrollY: '50vh', to the datatable configuration and this fixes the column filters nicely. Problem is that now the column filters don't work and my limited jQuery knowledge has left me stumped!  Any ideas?
   <a href="https://jsfiddle.net/zaoz5419/" rel="nofollow noreferrer">https://jsfiddle.net/zaoz5419/</a></p>
  
  <pre><code>&lt;script src='https://code.jquery.com/jquery-1.11.0.js'&gt;&lt;/script&gt;
  &lt;script src='https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css'&gt;&lt;/script&gt;
  &lt;script src='https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js'&gt;&lt;/script&gt;
  &lt;table id="example" class="display" cellspacing="0" width="100%"&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Position&lt;/th&gt;
          &lt;th&gt;Office&lt;/th&gt;
          &lt;th&gt;Age&lt;/th&gt;
          &lt;th&gt;Start date&lt;/th&gt;
          &lt;th&gt;Salary&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Position&lt;/th&gt;
          &lt;th&gt;Office&lt;/th&gt;
          &lt;th&gt;Age&lt;/th&gt;
          &lt;th&gt;Start date&lt;/th&gt;
          &lt;th&gt;Salary&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tfoot&gt;
      &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Position&lt;/th&gt;
          &lt;th&gt;Office&lt;/th&gt;
          &lt;th&gt;Age&lt;/th&gt;
          &lt;th&gt;Start date&lt;/th&gt;
          &lt;th&gt;Salary&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/tfoot&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;Tiger Nixon&lt;/td&gt;
          &lt;td&gt;System Architect&lt;/td&gt;
          &lt;td&gt;Edinburgh&lt;/td&gt;
          &lt;td&gt;61&lt;/td&gt;
          &lt;td&gt;2011/04/25&lt;/td&gt;
          &lt;td&gt;$320,800&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Garrett Winters&lt;/td&gt;
          &lt;td&gt;Accountant&lt;/td&gt;
          &lt;td&gt;Tokyo&lt;/td&gt;
          &lt;td&gt;63&lt;/td&gt;
          &lt;td&gt;2011/07/25&lt;/td&gt;
          &lt;td&gt;$170,750&lt;/td&gt;
      &lt;/tr&gt;
  &lt;!-- see fiddle for extended list --&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>});</p>
  
  <p>.</p>
  
  <pre><code>$(document).ready( function () { 
  // Setup - add a text input to each header cell
  $('#example thead tr:eq(1) th').each( function () {
      var title = $('#example thead tr:eq(0) th').eq( $(this).index() ).text();
      $(this).html( '&lt;input type="text" placeholder="Search '+title+'" /&gt;' );
  } ); 
  
  var table = $('#example').DataTable({
      orderCellsTop: true,
      scrollY: '50vh',
      scrollCollapse: true,
  });
  
  // Apply the search
  table.columns().every(function (index) {
      $('#example thead tr:eq(1) th:eq(' + index + ') input').on('keyup change', function () {
          table.column($(this).parent().index() + ':visible')
              .search(this.value)
              .draw();
      });
    });
  });
  </code></pre>