title: Datatables Multi Filter Same Column
body: <p>I need to be able to apply multiple filters to a single column using datatables.</p>
  
  <p>I've been looking at an example they have provided <a href="https://www.datatables.net/release-datatables/examples/api/multi_filter_select.html" rel="nofollow noreferrer">here</a> but my requirements are slightly different.</p>
  
  <p>The first column in my table will contain location information, each cell will contain a <code>building name</code> and <code>floor</code>. I want to have two dropdowns that allow users to filter on both of these.</p>
  
  <p>So e.g. '<em>Show me Building 1 and Second Floor</em>'. </p>
  
  <p>I can get the first dropdown to filter on building, but the second doesn't filter on floor.  My current code is below, here's a <a href="https://codepen.io/qubjohnny/pen/jOPrymJ?editors=1010" rel="nofollow noreferrer">codepen</a>.</p>
  
  <p>Note I have simplified this table and limited it to 6 records, my live table will contain hundreds of records.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var table = $("#example").DataTable();
  
    $("#dropdown1").on("change", function() {
      table
        .columns(0)
        .search(this.value)
        .draw();
    });
    $("#dropdown2").on("change", function() {
      table
        .columns(0)
        .search(this.value)
        .draw();
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet"/&gt;
  &lt;select id="dropdown1"&gt;
    &lt;option value=""&gt;Building&lt;/option&gt;
    &lt;option value="Building 1"&gt;Building 1&lt;/option&gt;
    &lt;option value="Building 2"&gt;Building 2&lt;/option&gt;
  &lt;/select&gt;
  &lt;select id="dropdown2"&gt;
    &lt;option value=""&gt;Floor&lt;/option&gt;
    &lt;option value="First Floor"&gt;First Floor&lt;/option&gt;
    &lt;option value="Second Floor"&gt;Second Floor&lt;/option&gt;
    &lt;option value="Third Floor"&gt;Third Floor&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;table id="example" class="display" cellspacing="0" width="100%"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Location&lt;/th&gt;
        &lt;th&gt;Status&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Building 1&lt;br&gt;&lt;span class="floor"&gt;First Floor&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;Available&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Building 1&lt;br&gt;&lt;span class="floor"&gt;Second Floor&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;Available&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Building 1&lt;br&gt;&lt;span class="floor"&gt;Third Floor&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;Available&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Building 2&lt;br&gt;&lt;span class="floor"&gt;First Floor&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;Unavailable&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Building 2&lt;br&gt;&lt;span class="floor"&gt;Second Floor&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;Available&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Building 2&lt;br&gt;&lt;span class="floor"&gt;Third Floor&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;Unavailable&lt;/td&gt;
      &lt;/tr&gt;
  
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>