javascript - 数据库查询的实时过滤器
问题描述
我正在创建一个 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>
  |
<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>
解决方案
您正走在“实时过滤器”的正确道路上。你肯定需要一些 JavaScript。你选择哪一个取决于你。
例如,您可以使用 jQuery 和 AJAX 从后端请求数据:
$.ajax({
url: "interface.php?client=1234",
type: 'GET',
success: function(html){
//update your UI here
}
});
请注意,您可能会有很多流量,具体取决于您的数据量和/或用户量。因此,您可以考虑某种缓存。
推荐阅读
- c++ - 如果我们知道父子之间的连接,如何递归地将元素插入到 n 个数组树结构中?
- c++ - 获取一个新元组,其中包含元组的除第一个元素之外的所有元素
- php - 使用 WAMP 连接到 SQL Server
- sql - 从 SSMS 中的查询结果创建带有 SQL 的表
- julia - Julia:匹配属于联合的任何类型
- sql-server - 如何在 SQL Server 查询中有条件地返回列?
- r - R中的标题字典
- servlets - 构建 servlet api 时 Servlet 包不可用并抛出编译时错误 servlet 包不可用
- facebook - 从 facebook Graph API 创建事件
- twitter - Twitter的用户和应用程序速率限制之间的差异