title: How to combine multiple FIlters together to filter Task Rows using jQuery?
body: <p>I have hacked together a basic example Task List Table with HTML and using jQuery.  I have attached some <code>on change</code> events to my <code>Filter DropDown Selection Fields</code></p>
  
  <p>Demo: <a href="http://codepen.io/jasondavis/pen/MwOwMX?editors=101" rel="noreferrer">http://codepen.io/jasondavis/pen/MwOwMX?editors=101</a></p>
  
  <p><img src="https://i.stack.imgur.com/7LzDT.png" alt="enter image description here"></p>
  
  <p>I have a Filter Selection Field for each of these:  </p>
  
  <ul>
  <li>Assigned User</li>
  <li>Task Status</li>
  <li>Milestone</li>
  <li>Priority</li>
  <li>Tags</li>
  </ul>
  
  <p>Independently they all work to get the job done in filtering out non matching results from my Task List Table.</p>
  
  <p>For each Task Row, I store the value of each filterable option in a <code>Data Attribute</code> like this example <strong>Task Row HTML</strong>:  </p>
  
  <pre><code>      &lt;tr id="task-3"
            class="task-list-row" 
            data-task-id="3"
            data-assigned-user="Donald"
            data-status="Not Started"
            data-milestone="Milestone 1"
            data-priority="Low"
            data-tags="Tag 3"&gt;
          &lt;td&gt;Task title 3&lt;/td&gt;
          &lt;td&gt;11/16/2014&lt;/td&gt;
          &lt;td&gt;02/29/2015&lt;/td&gt;
          &lt;td&gt;Low&lt;/td&gt;
          &lt;td&gt;Milestone 1&lt;/td&gt;
          &lt;td&gt;Donald&lt;/td&gt;
          &lt;td&gt;Tag 3&lt;/td&gt;
        &lt;/tr&gt;
  </code></pre>
  
  <p>So the actual Text for the Task row does not matter because the Task row will not show all the properties.  WHat matters is the value stored in the Task Row Data Attributes.</p>
  
  <p>A Task row/record with a <code>Miledstone</code> set to <code>Milestone 2</code> will have a Data Attribute like this <code>data-milestone="Milestone 2"</code></p>
  
  <p><strong>An example JavaScript/jQuery Filter code:</strong>  </p>
  
  <pre><code>// Task Milestone Dropdown Filter
  $('#milestone-filter').on('change', function() {
    var taskMilestone = this.value;
  
    if(taskMilestone === 'None'){
      $('.task-list-row').hide().filter(function() {
        return $(this).data('milestone') != taskMilestone;
      }).show();
    }else{
      $('.task-list-row').hide().filter(function() {
        return $(this).data('milestone') == taskMilestone;
      }).show();  
    }
  });
  </code></pre>
  
  <p>So as I mentioned.  I can get each of my "FIlters" to work by thereself, however as soon as I try to apply more than 1 filter at a time, it will not work with this current code.</p>
  
  <p><strong>I would appreciate any help in modifying my code to make a working multi-filter example please?</strong></p>
  
  <p>My current demo is here: <a href="http://codepen.io/jasondavis/pen/MwOwMX?editors=101" rel="noreferrer">http://codepen.io/jasondavis/pen/MwOwMX?editors=101</a></p>
  
  <hr>
  
  <p><strong>Update Test 2</strong>  </p>
  
  <p>After some thought, I am thinking that perhaps I need to store all the current Filter values into variables and then on each <code>change</code> event instead of this:  </p>
  
  <pre><code> return $(this).data('milestone') != taskMilestone;
  </code></pre>
  
  <p>It would instead need to be more like this...  </p>
  
  <pre><code> return $(this).data('milestone') != taskMilestone
          &amp;&amp; $(this).data('priority') != taskPriority
          &amp;&amp; $(this).data('tags') != taskTags
          &amp;&amp; .... for all filters;
  </code></pre>
  
  <p>Does that sound about right?</p>
  
  <p>Nevermind, just tried this with no luck!</p>