title: Dynamic PHP Table Filter and Sort
body: <p>I've written a bit of CSS and PHP to query a MySQL table.  I also have a filter in the form of a drop down box which allows the user to choose a 'family', whether it be "capacitor", "resistor", or "ferrite bead" (I've included pictures below of what this looks like).  </p>
  
  <p>My question is this: how can I create a sorting system for the elements once they have been filtered by family?  That is, if I wanted to query the table from MySQL corresponding to ASC values of "voltage" for example, how would I go about this?  I need to retain the filter when the sorting method is selected.  I have included my code so far below the images.  Thanks for the help!</p>
  
  <p>(Below: 1, full table is loaded : 2, only family entries that match "capacitor" are loaded)</p>
  
  <p><a href="https://i.stack.imgur.com/C4ksA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C4ksA.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/0LQ36.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0LQ36.png" alt="enter image description here"></a></p>
  
  <p>CODE: (File name, index.php)</p>
  
  <pre><code>&lt;html&gt;
     &lt;form action="index.php" method="post"&gt;
        &lt;select name="family"&gt;
           &lt;option value="" selected="selected"&gt;Any family&lt;/option&gt;
           &lt;option value="capacitor"&gt;capacitor&lt;/option&gt;
           &lt;option value="resistor"&gt;resistor&lt;/option&gt;
           &lt;option value="ferrite bead"&gt;ferrite bead&lt;/option&gt;
        &lt;/select&gt;
        &lt;input name="search" type="submit" value="Search"/&gt;
     &lt;/form&gt;
     &lt;head&gt;
        &lt;meta charset = "UTF-8"&gt;
        &lt;title&gt;test.php&lt;/title&gt;
           &lt;style&gt;
              table {
              border-collapse: collapse;
              width: 50%;
              }
              th, td {
              input: "text";
              text-align: left;
              padding: 8px;
              }
              th {
              background-color: SkyBlue;
              }
              tr:nth-child(odd) {background-color: #f2f2f2;}
              tr:hover {background-color: AliceBlue;} 
           &lt;/style&gt;
     &lt;/head&gt;
  
  &lt;body&gt;
     &lt;p&gt;
     &lt;?php
        $family = "";
        if(isset($_POST['family'])) {
           $family = $_POST['family'];
        }
  
        try {
           $con= new PDO('mysql:host=localhost;dbname=mysql', "root", "kelly188");
           $con-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  
           if(!empty($family)) {
          $query = 'SELECT * FROM testv2 WHERE family = "'.$family.'"';
           }
           else {
          $query = "SELECT * FROM testv2";
           }
  
           //first pass just gets the column names
           print "&lt;table&gt;";
           $result = $con-&gt;query($query);
  
           //return only the first row (we only need field names)
           $row = $result-&gt;fetch(PDO::FETCH_ASSOC);
           print " &lt;tr&gt;";
           foreach ($row as $field =&gt; $value){
          print " &lt;th&gt;$field&lt;/th&gt;";
           }
           // end foreach
           print " &lt;/tr&gt;";
  
           //second query gets the data
           $data = $con-&gt;query($query);
           $data-&gt;setFetchMode(PDO::FETCH_ASSOC);
           foreach($data as $row){
          print " &lt;tr&gt;";
          foreach ($row as $name=&gt;$value){
             print " &lt;td&gt;$value&lt;/td&gt;";
          } //end field loop
          print " &lt;/tr&gt;";
           } //end record loop
           print "&lt;/table&gt;";
        } catch(PDOException $e) {
        echo 'ERROR: ' . $e-&gt;getMessage();
        } // end try
     ?&gt;
     &lt;/p&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>