Question

我正在创建一个Web应用程序，用户可以在其中轻松访问数据库中的信息。

我已经在PHP和MYSQL中编写了代码，用户可以在其中输入例如患者的dna代码，并且该患者的所有数据都显示在表格中。

我现在想做的是使用实时过滤器过滤表中的数据？

我已经在寻找JavaScript代码，但由于该站点具有根据用户想要查找的内容而变化的动态表，因此无法正常工作。

我想创建的东西是应用于我已经拥有的表的过滤器，其中每列都有一个下拉列表，可帮助用户过滤表中的数据。

我在寻找jQuery，数据表和引导程序应用程序，但我不知道。非常感谢

我将在此处附加我的代码，因为我已经尝试使用jquery和数据表插入一些代码行，但是没有任何变化。

<!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>

Answer 1

使用“实时过滤器”的方法是正确的。您肯定需要一些JavaScript。您选择哪一个取决于您。

例如，您可以使用jQuery和AJAX从后端请求数据，如下所示：

$.ajax({
  url: "interface.php?client=1234",
  type: 'GET',
  success: function(html){
    //update your UI here
  }
});

请注意，您的流量可能会很大，具体取决于您的数据量和/或用户数量。因此，您可以考虑某种缓存。

Answer 2

您必须异步检索数据，并且可以使用以下插件来获取所需的信息

https://www.jqueryscript.net/table/Simple-jQuery-Dropdown-Table-Filter-Plugin-ddtf-js.html

对数据库查询进行实时过滤

2 个答案: