我想将表转换为数据表，以便用户可以更轻松地读取显示的数据，并且可以添加实时过滤器以仅选择某些类型的数据。这是我的代码，我已经编写了实现该代码所需的代码。 尽管如此，如果运行了代码，则表不是动态的，也不会变成数据表。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FILTRARE PER GENE</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div>
<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>
<input type="text" id="search" placeholder="Live Search...">
<BR>
<form action="filtro_per_gene_selezione_per_var_RICERCA_PAZ.php" method="POST">
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 />
<div class="container">
<div class="row">
<div class="col-mid-8 col-mid-offset-2">
<table class="table table-striped table-bordered table-hover">
<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>
<tbody>
<?php
$conn= mysql_connect("local", "user", "pass");
if (!$conn)
{
die("Connessione non riuscita <br>" . mysql_error());
//}else{
//echo "Connessione al database stabilita con successo<br><br>";
}
mysql_select_db("database_var", $conn);
if(isset($_POST["vai"])){
$dna=$_POST["dna"];
}
$sql="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 V.dnaCode='" .$dna. "'";
$result_gene = mysql_query($sql, $conn) or die(mysql_error());
$record_gene=mysql_fetch_array($result_gene);
$index=1;
while ($record_gene=mysql_fetch_array($result_gene)){
echo '
<tr>
<b><td>'.$index.'</td></b>
<td>'.$record_gene['dnaCode'].'</td>
<td>'.$record_gene['Chr'].'</td>
<td>'.$record_gene['Start'].'</td>
<td>'.$record_gene['End'].'</td>
<td>'.$record_gene['Alt'].'</td>
<td>'.$record_gene['Ref'].'</td>
<td>'.$record_gene['zygosity'].'</td>
<td>'.$record_gene['gene'].'</td>
<td>'.$record_gene['Func'].'></td>
<td>'.$record_gene['GeneContext'].'</td>
<td>'.$record_gene['Dist'].'</td>
</tr>
';
++$index;
};
?>
</tbody>
</table>
</div>
</div>
</div>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script type="text/javascript" src="file:///C|/xampp/htdocs/DB/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="file:///C|/xampp/htdocs/DB/js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.table').DataTable();
});
</script>
</body>
</html>