Podrías dar solución a tu problema haciendo uso de peticiones asincronas de Javascript, si no estas relacionado con el tema te dire que son supremamente utiles, ya que te permiten comunicarte con el servidor por medio del navegador sin necesidad de renderizar de nuevo el contenido, y a partir de los datos que se obtienen, puedes crear los elementos HTML necesarios para colocar los datos en pantalla, si necesitas una mejor explicacion puedes consultar este link.
Basicamente, tendrias que crear un archivo Php que se encargue de consultar los datos y te devuelva una cadena de caracteres en algun formato, por ejemplo JSON, y posteriormente desde Javascript crearias un evento, de forma que cuando presiones el boton Actualizar
se ejecute una peticion asincronica al navegador, obteniendo los datos, creando los elementos HTML segun la estructura que tienes en tu codigo para luego vaciar el cuerpo de la tabla y asi poder renderizar los elementos que acabas de formar.
servidor.php
<?php
$todos_contacto = consultarDatos();
$json = '{ contactos: [';
foreach($todos_contacto as $todos) {
$json .= '{
"id": $todos->id_contacto,
"nombre": $todos->nombre,
"apellido": $todos->apellido,
"colonia": $todos->colonia,
"correo": $todos->correo
},';
}
// Quitar ultima coma
$json = substr($json, 0, -1);
$json .= ']}'
// Enviar respuesta
echo $json;
?>
cliente.js
document.getElementById('boton-actualizar').addEventListener('click', async (e) => {
const resultado = await fetch('servidor.php')
const json = await resultado.json()
const { contactos } = json
const tBody = document.createElement('tbody')
// Armar las filas
await contactos.forEach((contacto) => {
// Crear fila
const tRow = document.createElement('tr')
// Crear columnas
const tdId = document.createElement('td')
const tdNombre = document.createElement('td')
const tdApellido = document.createElement('td')
const tdColonia = document.createElement('td')
const tdCorreo = document.createElement('td')
// Asignar valores
tdId.innerHTML = contacto.id
tdNombre.innerHTML = contacto.nombre
tdApellido.innerHTML = contacto.apellido
tdColonia.innerHTML = contacto.colonia
tdCorreo.innerHTML = contacto.correo
// Agregar columnas a fila creada
tRow.appendChild(tdId)
tRow.appendChild(tdNombre)
tRow.appendChild(tdApellido)
tRow.appendChild(tdColonia)
tRow.appendChild(tdCorreo)
// Agregar fila al cuerpo creado
tBody.appendChild(tRow)
})
// Reemplazar cuerpo anterior por el actual
const tabla = document.getElementById('contacto')
tabla.replaceChild(tBody, tabla.querySelector('tbody'))
})
Espero te sea de ayuda mi respuesta, cordial saludo.