Q: live filter on a database's query I'm creating a web app where users can easy access to information in a database.
I already wrote the code in PHP and MYSQL where the user can enter for example the dna Code of a patient and all data of that patient is displayed in a table. 
What I would like to do now is filter the data in the table using live filters??
I already looked for a JavaScript code, but it doesn't work since the site has dynamic tables that changes according to what the user want to look up. 
The thing I would like to create is filters to apply to the table I already have, in which every column has a dropdown that help the user filter the data in the table.
I looked for jQuery, datatable and bootstrap applications but I can't figure it out.
Thank you so much
I'll attach here my code because I already tried to insert some line of codes with jquery and data table but nothing changes. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>FILTRARE PER GENE</title>
</head>

<body>

    <div id="holder">
    <h1><?php echo "FILTRO PER GENE DELLE VARIANTI";?></h1></div>
    <hr />
    <br>


    <div id="sidebar" style="width:50%">
      <A HREF="varianti_utente.php" class="w2-bar-item w2-button">NUOVA RICERCA</A>
      &nbsp;&nbsp;&nbsp | &nbsp;&nbsp;&nbsp; 
      <A HREF="dati_utente.php" class="w2-bar-item w2-button">DATI UTENTE</A>
      &nbsp;&nbsp;&nbsp | &nbsp;&nbsp;&nbsp;
      <A HREF="home.php" class="w2-bar-item w2-button">HOME</A>
      <P>&nbsp;</P>
    </div>

    <div>
    <BR>
    <form action="variante.php" method="POST">
    CODICE DNA <input type="text" name="dna" val="">
    GENE <select name="gene">
    <option></option>
    <option>CFH</option>
    <option>CD46</option>
    <option>CFI</option>
    <option>CFB</option>
    <option>C3</option>
    <option>ADAMTS13</option>
    <option>THBD</option>
    <option>DGKE</option>
    <input type='submit' name='vai' value'Invia'>
    </form><BR /><BR />

    <?php
    $conn= mysql_connect("start", "db", "password");
    if (!$conn)
    {
         die("Connessione non riuscita <br>" . mysql_error());
    //}else{
        //echo "Connessione al database stabilita con successo<br><br>";
    }

    mysql_select_db("variant_db", $conn);

    if(isset($_POST["vai"])){
       $gene=$_POST["gene"];
    }
    echo "Verranno visualizzati i risultati per il gene '<b>$gene</b>' selezionato.<br><br>";

    $sql_gene= "SELECT V.dnaCode, V.Chr, V.Start, V.End, V.Alt, V.Ref, V.zygosity, A.gene, A.Func, A.GeneContext, A.Dist FROM variante as V JOIN annotazioni as A ON V.Start = A.Start AND V.Alt=A.Alt AND V.Ref=A.Ref WHERE A.gene='" .$gene. "'";
    $result_gene = mysql_query($sql_gene, $conn) or die(mysql_error());;
    $record_gene = mysql_fetch_array($result_gene);
    if($record_gene==false)
    {
          echo "<br>La ricerca non ha prodotto alcun risultato con il gene selezionato!<br>";
          echo"Il paziente non presenta varianti sul gene '<b>$gene</b>'.<br>";
    }else
    {
         $index=1;?>
          <table id="tab_annvar" width="100%">
           <thead>
             <tr>
              <td width="9%"><b>RISULTATO</b></td>
              <td width="9%"><b>dnaCode</b></td>
              <td width="9%"><b>Chr</b></td>
              <td width="9%"><b>Start</b></td>
              <td width="9%"><b>End</b></td>
              <td width="5%"><b>Alt</b></td>
              <td width="5%"><b>Ref</b></td>
              <td width="9%"><b>Zigosity</b></td>
              <td width="9%"><b>Gene</b></td>
              <td width="9%"><b>Func</b></td>
              <td width="9%"><b>Gene Context</b></td>
              <td width="9%"><b>Dist</b></td>
              </tr>
          </thead>

         <?php while ($record_gene = mysql_fetch_array($result_gene)) 
         {?>
          <tbody>   
              <tr>
              <b><td width="9%"><?php echo "#$index";?></td></b>
              <td width="9%"><?php echo $record_gene["dnaCode"];?></td>
              <td width="9%"><?php echo $record_gene["Chr"];?></td>
              <td width="9%"><?php echo $record_gene["Start"];?></td>
              <td width="9%"><?php echo $record_gene["End"];?></td>
              <td width="5%"><?php echo $record_gene["Alt"];?></td>
              <td width="5%"><?php echo $record_gene["Ref"];?></td>
              <td width="9%"><?php echo $record_gene["zygosity"];?></td>
              <td width="9%"><?php echo $record_gene["gene"];?></td>
              <td width="9%"><?php echo $record_gene["Func"];?></td>
              <td width="9%"><?php echo $record_gene["GeneContext"];?></td>
              <td width="9%"><?php echo $record_gene["Dist"];?></td>
              </tr>
          </tbody>
    <?php
        ++$index;
    }
    }?>
       </table>
    </div>


</body>
</html>


A: You are on the right way for "live filters". You definetly need some JavaScript. Which one you chose is up to you. 
For instance, you can use jQuery and AJAX for requesting your data from the backend as: 
$.ajax({
  url: "interface.php?client=1234",
  type: 'GET',
  success: function(html){
    //update your UI here
  }
});

Be aware that you probably will have a lot of traffic, depending up on your amount of data and/or user. Therefore, you could think about some kind of caching.

A: You have to retrieve your data async and you can use the following plugin to get what you need
https://www.jqueryscript.net/table/Simple-jQuery-Dropdown-Table-Filter-Plugin-ddtf-js.html
