title: Filter large table (HTML JS PHP MYSQL)
body: <p>I have a database with a lot of fields. I want the user to be able to filter on multiple fields. I am looking for a Javascript implementation (without jQuery) and possibly a jQuery one as well. What I am going for is the function that excel provides when you apply filters to table headers only in html, php, js, and using mySQL as the database.</p>
  
  <p>This is my flow so far:</p>
  
  <ol>
  <li><p>PHP builds the dropdowns for the seperate fields, example: </p>
  
  <p>option value=\"".$row[$filterby]."\">" ....</p></li>
  <li><p>User selects an item and "onChange" calls a JS function to build the search string:</p>
  
  <p>?fruit=apple&amp;color=green</p></li>
  </ol>
  
  <p>The issue I am having is in order to update my table, I have to call a seperate PHP page in my JS (using window.location = "filtered.php" + searchString;)</p>
  
  <p>The code works for one field, but if I want multiple fields to be filtered, the new page has no memory of what I just passed in.</p>
  
  <p>My question is two-fold:</p>
  
  <ol>
  <li>Am I going about this completely wrong? What is the best way to produce what I am going for?</li>
  <li>Is this possible without JQuery or AJAX?</li>
  </ol>
  
  <p>EDIT: </p>
  
  <p>Thought I'd add a visual for clarity.</p>
  
  <pre><code>+----+--------+----------+
  | id | Fruit  | Color    | 
  +----+--------+----------+
  | 1  | apple  | red      | 
  | 2  | mango  | yellow   | 
  | 3  | banana | yellow   | 
  | 4  | apple  | green    | 
  +----+--------+----------+
  </code></pre>
  
  <p>filter.php?fruit=apple&amp;color=green</p>
  
  <pre><code>+----+--------+----------+
  | id | Fruit  | Color    | 
  +----+--------+----------+
  | 4  | apple  | green    | 
  +----+--------+----------+
  </code></pre>
  
  <p>EDIT2:</p>
  
  <p>Would it be better to get all data with php and have the filters just update the html data? Or should I try to have the JS query the DB everytime a dropdown is changed?</p>