title: DataTables Individual Column searching
body: <p>Is it possible to combine the <code>Select Inputs</code> and the <code>Text Inputs</code>? I use DataTables on several tables, always the same initialization. I would like to chose the column for the <code>Select Inputs</code> by the column header since the column that I want the select list on is not always in the same position. Then all the others I want to have the <code>Text Inputs</code>. This way I'll have one column that has the <code>Select Inputs</code> and all others that have the <code>Text Inputs</code>.</p>
  
  <p>I have been able to implement the different <a href="https://datatables.net/release-datatables/examples/api/multi_filter_select.html" rel="nofollow noreferrer">Select</a> and <a href="https://datatables.net/release-datatables/examples/api/multi_filter_select.html" rel="nofollow noreferrer">Text</a> Inputs from these two examples. But I'm not good enough with jquery and javascript to figure out how to select the right column for the <code>Select Input</code> and have all the others be <code>Text Inputs</code>. The tables that I use can be anywhere from 3 columns to 75+ columns. And I want to select the column by the header name for the Select input.</p>
  
  <p>And on top of all of this, is there a way to make the <code>Select Input</code> a MultiSelect Input? I am having it a selector for the state and would like to be able to select multiple states at once.</p>
  
  <p>Here are the two different ways I've used for the <code>Select</code> and <code>Text</code> input:</p>
  
  <pre><code>initComplete: function ()
  {
      this.api().columns([1]).every(function ()
      {
          var column = this;
          var select = $('&lt;select&gt;&lt;option value=""&gt;&lt;/option&gt;&lt;/select&gt;')
                  .appendTo($(column.footer()).empty())
                  .on('change', function ()
                  {
                      var val = $.fn.dataTable.util.escapeRegex(
                          $(this).val()
                      );
                      var strVal = val.replace("&lt;div class='Scrollable'&gt;", '');
                      strVal = strVal.replace("&lt;\/div&gt;", '');
                      column
                          .search(strVal ? /*'^' +*/ strVal /*+ '$'*/ : '', true, false)
                          .draw();
                  });
  
          column.data().unique().sort().each(function (d, j)
          {
              var strValue = d.replace("&lt;div class='Scrollable'&gt;", '');
              strValue = strValue.replace("&lt;\/div&gt;", '');
              select.append('&lt;option value="' + strValue + '"&gt;' + strValue + '&lt;/option&gt;')
          });
      });
  }
  ,
  initComplete: function ()
  {
      var api = this.api();
  
      // Apply the search
      api.columns().every(function ()
      {
          var that = this;
  
          $('input', this.footer()).on('keyup change', function ()
          {
              if (that.search() !== this.value)
              {
                  that
                        .search(this.value)
                        .draw();
              }
          });
      });
  }
  </code></pre>
  
  <p><strong>EIDT</strong></p>
  
  <p>Using @Gyrocode's suggestion from below I now have this:</p>
  
  <pre><code>initComplete: function ()
  {
      var api = this.api();
  
      // Apply the search
      api.columns('.dt-filter-text').every(function ()
      {
          var that = this;
  
          $('input', this.footer()).on('keyup change', function ()
          {
              if (that.search() !== this.value)
              {
                  that
                    .search(this.value)
                    .draw();
              }
          });
      });
      api.columns('.dt-filter-select').every(function ()
      {
          var column = this;
          var select = $('&lt;select&gt;&lt;option value=""&gt;&lt;/option&gt;&lt;/select&gt;')
              .appendTo($(column.footer()).empty())
              .on('change', function ()
              {
                  var val = $.fn.dataTable.util.excapeRegex(
                      $(this).val()
                  );
                  var strVal = val.replace("&lt;div class='Scrollable'&gt;", "");
                  strVal = strVal.replace("&lt;/div&gt;", '');
                  column
                      .search(strVal ? /*'^' +*/strVal /*+ '$'*/ : '', true, false)
                      .draw();
              });
          column.data().unique().sort().each(function (d, J)
          {
              var strValue = d.replace("&lt;div class='Scrollable'&gt;", '');
              strValue = strValue.replace("&lt;/div&gt;", '');
              select.append('&lt;option value="' + strValue + '"&gt;' + strValue + '&lt;/option&gt;')
          });
      });
  }
  </code></pre>
  
  <p>This almost works. When I select a value from the selector in the State column it doesn't search. I'm sure I'm missing something obvious, but I don't know what. </p>
  
  <p>Also, it is not getting all the states, only the ones on the first page. Is there a way to get all the states or perhaps to have an array that will hold all the values that I need since the states are not likly to change?</p>