Emm Emm - 1 month ago 11
MySQL Question

Refreshing only an HTML table, not the entire page

good afternoon!
I have an HTML table in combination with Php. I want to do is that when you enter new data into the database, the table is refreshed to show the new data, but only the table and not the rest of the page. Honestly I'm not a programmer, but I have understood that it could be done with JSON and Ajax but do not know how. If someone has the time and patience to tell me how I appreciate it a lot.

This is my Php code:

<?php
// ----------- CONEXIÓN ------------------
require 'RecibeConsultaPuenteConexion.php';
//echo "Conexión OKAS <br />";
// ----------- TRAYENDO DATOS ------------------
$statement = $conexion->query('SELECT * FROM tbl_consultas');
$statement->execute();


$resultados = $statement->fetchAll();
foreach ($resultados as $fila) {



}





// json_encode($fila);


?>


And this is my Html code:

<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" >
<table class="Pizarra" id="pizarra" name="pizarra" cellspacing="0px";>
<tr class="trThDos">
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tbody>
<!-- Comienza PHP -->
<?php
$i = 0;
foreach ($resultados as $fila) {
?>
<tr class="trPizarra" id="trPizarra">

<td class="tdTurno" style="text-align:center;"><?php echo '#' . ++$i ?></td>

<td class="tdImg" style="text-align:center;"><?php echo $fila ['asunto'];

switch ($fila['asunto']){

case "0":
echo "<img src='./img/consulta-56-2.png' title=\"Consulta.\" height=\"32\" width=\"32\">";
break;

case "1":
echo "<img src='./img/shot-56-2.png' title=\"Inyección.\" height=\"32\" width=\"32\">";
break;

case "2":
echo "<img src='./img/ta-56-2.png' title=\"Toma de presión.\" height=\"32\" width=\"32\">";
break;

case "3":
echo "<img src='./img/cert-56-2.png' title=\"Certificado médico.\" height=\"32\" width=\"32\">";
break;

case "4":
echo "<img src='./img/consulta-56-4.png' title=\"Consulta ⬇ abajo.\" height=\"32\" width=\"32\">";
break;

case "5":
echo "<img src='./img/shot-56-4.png' title=\"Inyección ⬇ abajo.\" height=\"32\" width=\"32\">";
break;

case "6":
echo "<img src='./img/ta-56-4.png' title=\"Toma de presión ⬇ abajo.\" height=\"32\" width=\"32\">";
break;

case "7":
echo "<img src='./img/cert-56-4.png' title=\"Certificado médico ⬇ abajo.\" height=\"32\" width=\"32\">";
break;

default:
echo "Hubo un error en la selección de asunto";
break;

} ?></td>

<td class="tdNombre" id="tdNombre" style="text-align:center;"><?php echo $fila ['nombre_completo']; ?></td>

<td class="tdHr" style="text-align:center;"><?php echo $fila ['hora']; ?> <span class="icon icon-stopwatch"></span></td>

<td class="td-aceptar">
<a class="aceptar-a" id="aceptar-a" href="http://localhost/FARMAXIA/index.php?id=<?php echo $fila['ID']; ?>" title="Aceptar paciente." >
<button class="btn btn-xs" id="aceptar-btn" ><span class="glyphicon glyphicon-ok"></span> Aceptar</button>
</a>
</td>

</tr>
<?php } ?>
<!-- Terminó PHP -->
<tfoot class="tableFoot">
<tr>
<td colspan="5"><p>&nbsp;</p></td>
</tr>
</tfoot>

</tbody>
</table>
</form>

Answer

Your basic bare to bones code would be this

your jQuery code

//asuming you want to refresh your table every 5 sec
function refresh_table()
{
    $.ajax({
        type:"POST",
        url:"my_refresh_php_code.php",
        cache:false,
        success:function(html){ // html returns the code outputted from the below php script
            $("my_table_class_or_id").html(html); //replace your table html with the new one
        }
    })
}

setInterval(refresh_table, 5000);

Your "my_refresh_php_code.php" script

<?php

//output the data you want your table to be refreshed with
echo "my text"

?>