title: jQuery Datatables: Combining column visibility with individual column filters (text inputs)?
body: <p>I am using <a href="https://datatables.net/extensions/buttons/examples/column_visibility/simple.html" rel="nofollow noreferrer">basic column visibility</a> and <a href="https://datatables.net/examples/api/multi_filter.html" rel="nofollow noreferrer">individual column searching (text inputs)</a>.</p>
  
  <p>The problem is that when the user adds a previously-hidden column to the table, the text field box for that column does not appear. Thus, the user cannot filter that column.</p>
  
  <p>Does anyone know how to enable filters for hidden columns as well? Ideally, this would not cause a byproduct of clearing the text in the other filters (if the user did enter text in the other filters).</p>
  
  <p>Here is my filtering code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      // Setup - add a text input to each footer cell
      $('#tableID tfoot th').each( function () {
          var title = $(this).text();
  
          if ((title != '') &amp;&amp; !(title.includes("$"))) {
              // Then the current column is *not* the Action column.          
              $(this).html( '&lt;span style="color: #515151; font-size:15px;"&gt;&lt;i&gt;Filter&lt;/i&gt;&lt;/span&gt; &lt;br&gt; &lt;input type="text"  style="margin-top:10px;" placeholder="'+title+'" /&gt; ' );
          }
      } );
  
      var table = $('#tableID').DataTable();
      // Apply the search
      table.columns().every( function () {
          var that = this;
  
          $( 'input', this.footer() ).on( 'keyup change', function () {
              if ( that.search() !== this.value ) {
                  that
                  .search( this.value )
                  .draw();
              }
          });
      } );
  
  } );    
  &lt;/script&gt;  
  </code></pre>
  
  <p>I am using this line to hide the columns that I want to be hidden from view by default:</p>
  
  <pre><code>(table.column('.hideCol')).visible(false);
  </code></pre>