title: Jquery data table column filter header responsive
body: <p>I have tried Bootstrap jQuery data table column filter in header</p>
  
  <p><a href="http://jsfiddle.net/80umxrxe/122/" rel="nofollow noreferrer">http://jsfiddle.net/80umxrxe/122/</a></p>
  
  <p>thead 2nd row column filter design was not working in responsive window, i want to hide like in the thead 1st row</p>
  
  <p>thead 1st row was title
  thead 2nd row was filters</p>
  
  <p>My code is below</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
          &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css"&gt;     
          &lt;script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"&gt;&lt;/script&gt;
         &lt;script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              // Setup - add a text input to each footer cell
              $('#example .filters td').each( function () {
                  var title = $('#example thead th').eq( $(this).index() ).text();
                  $(this).html( '&lt;input type="text" placeholder="Search '+title+'" /&gt;' );
              } );
  
              // DataTable
                  var table = $('#example').DataTable( {
                      responsive: true
                  });
  
              // Apply the search
              table.columns().eq( 0 ).each( function ( colIdx ) {
                  $( 'input', $('.filters td')[colIdx] ).on( 'keyup change', function () {
                      table
                          .column( colIdx )
                          .search( this.value )
                          .draw();
                  } );
              } );
          } );
  
          &lt;/script&gt;
          &lt;style&gt;
          .filters input {
              width: 100%;
              padding: 3px;
              box-sizing: border-box;
          }
          &lt;/style&gt;
      &lt;/head&gt;
  &lt;body&gt;
  &lt;table id="example" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;First name&lt;/th&gt;
                  &lt;th&gt;Last 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;th&gt;Extn.&lt;/th&gt;
                  &lt;th&gt;E-mail&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;thead class="filters"&gt;
              &lt;tr&gt;
                  &lt;td&gt;First name&lt;/td&gt;
                  &lt;td&gt;Last name&lt;/td&gt;
                  &lt;td&gt;Position&lt;/td&gt;
                  &lt;td&gt;Office&lt;/td&gt;
                  &lt;td&gt;Age&lt;/td&gt;
                  &lt;td&gt;Start date&lt;/td&gt;
                  &lt;td&gt;Salary&lt;/td&gt;
                  &lt;td&gt;Extn.&lt;/td&gt;
                  &lt;td&gt;E-mail&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;Tiger&lt;/td&gt;
                  &lt;td&gt;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;td&gt;5421&lt;/td&gt;
                  &lt;td&gt;t.nixon@datatables.net&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Garrett&lt;/td&gt;
                  &lt;td&gt;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;td&gt;8422&lt;/td&gt;
                  &lt;td&gt;g.winters@datatables.net&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Ashton&lt;/td&gt;
                  &lt;td&gt;Cox&lt;/td&gt;
                  &lt;td&gt;Junior Technical Author&lt;/td&gt;
                  &lt;td&gt;San Francisco&lt;/td&gt;
                  &lt;td&gt;66&lt;/td&gt;
                  &lt;td&gt;2009/01/12&lt;/td&gt;
                  &lt;td&gt;$86,000&lt;/td&gt;
                  &lt;td&gt;1562&lt;/td&gt;
                  &lt;td&gt;a.cox@datatables.net&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Cedric&lt;/td&gt;
                  &lt;td&gt;Kelly&lt;/td&gt;
                  &lt;td&gt;Senior Javascript Developer&lt;/td&gt;
                  &lt;td&gt;Edinburgh&lt;/td&gt;
                  &lt;td&gt;22&lt;/td&gt;
                  &lt;td&gt;2012/03/29&lt;/td&gt;
                  &lt;td&gt;$433,060&lt;/td&gt;
                  &lt;td&gt;6224&lt;/td&gt;
                  &lt;td&gt;c.kelly@datatables.net&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Airi&lt;/td&gt;
                  &lt;td&gt;Satou&lt;/td&gt;
                  &lt;td&gt;Accountant&lt;/td&gt;
                  &lt;td&gt;Tokyo&lt;/td&gt;
                  &lt;td&gt;33&lt;/td&gt;
                  &lt;td&gt;2008/11/28&lt;/td&gt;
                  &lt;td&gt;$162,700&lt;/td&gt;
                  &lt;td&gt;5407&lt;/td&gt;
                  &lt;td&gt;a.satou@datatables.net&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Brielle&lt;/td&gt;
                  &lt;td&gt;Williamson&lt;/td&gt;
                  &lt;td&gt;Integration Specialist&lt;/td&gt;
                  &lt;td&gt;New York&lt;/td&gt;
                  &lt;td&gt;61&lt;/td&gt;
                  &lt;td&gt;2012/12/02&lt;/td&gt;
                  &lt;td&gt;$372,000&lt;/td&gt;
                  &lt;td&gt;4804&lt;/td&gt;
                  &lt;td&gt;b.williamson@datatables.net&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Herrod&lt;/td&gt;
                  &lt;td&gt;Chandler&lt;/td&gt;
                  &lt;td&gt;Sales Assistant&lt;/td&gt;
                  &lt;td&gt;San Francisco&lt;/td&gt;
                  &lt;td&gt;59&lt;/td&gt;
                  &lt;td&gt;2012/08/06&lt;/td&gt;
                  &lt;td&gt;$137,500&lt;/td&gt;
                  &lt;td&gt;9608&lt;/td&gt;
                  &lt;td&gt;h.chandler@datatables.net&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>1st row design working fine in responsive
  2nd row design not working want to hide the column filter like in the 1st row</p>