我正在创建一个web应用程序，用户可以方便地访问数据库中的信息。
我已经把代码写进去了 PHP 以及 MYSQL 其中，用户可以输入例如患者的dna代码，并且该患者的所有数据显示在表格中。
我现在想做的是使用实时过滤器过滤表中的数据？？
我已经在寻找javascript代码，但是它不起作用，因为该站点有根据用户想要查找的内容而改变的动态表。
我想创建的是应用于我已有的表的过滤器，其中每一列都有一个下拉列表，帮助用户过滤表中的数据。
我找了jquery、datatable和bootstrap应用程序，但找不出来。非常感谢
我将在这里附上我的代码，因为我已经尝试用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>
  |
<A HREF="dati_utente.php" class="w2-bar-item w2-button">DATI UTENTE</A>
  |
<A HREF="home.php" class="w2-bar-item w2-button">HOME</A>
<P> </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>
2条答案
按热度按时间igetnqfo1#
你必须异步检索你的数据，你可以使用下面的插件来获取你需要的
https://www.jqueryscript.net/table/simple-jquery-dropdown-table-filter-plugin-ddtf-js.html
9avjhtql2#
你是在正确的道路上的“活过滤器”。你肯定需要一些javascript。你选哪一个取决于你自己。
例如，您可以使用jquery和ajax从后端请求数据，如下所示：
请注意，根据您的数据量和/或用户数量，您可能会有很多流量。因此，您可以考虑某种缓存。