0

Quiero actualizar o refrescar pero solamente la pura tabla, no tengo idea de como hacerlo, por ejemplo al momento de que la tabla tenga los nombres de los contactos y con un botón le doy actualizar me tiene que actualizar solo la tabla para ver en tiempo real que contactos hay, el código funciona bien, de hecho, si actualizo o quito un contacto tengo que cerrar y abrir la modal para que haga el cambio pero eso es lo que no quiero.

<table class="table" id="contacto">
  <thead>
    <tr style="background-color: #C6EFCE;">

      <th>Nombre</th>
      <th>Apellido</th>
      <th>Calle</th>
      <th>Colonia</th>
      <th>Correo</th>

    </tr>
  </thead>
  <tbody>
  <?php foreach($todos_contacto as $todos): ?>
      <td><input class="checkbox1" type="checkbox" name="checkbox1"id= "<?=$todo->id_contacto;?>" value="<?=$todo->id_contacto;?>"> </td>
      <td><?=$todo->nombre?></td>

      <td><?= $todo->apellido;?></td>

      <td><?= $todo->calle;?></td> 

      <td ><?= $todo->colonia;?></td>
      <td><?= $todo->correo;?></td>

    </tr>

  <?php } endforeach ?>
  </tbody>
</table>

2 respuestas 2

0

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.

0

Si vas a tener que refrescar a cada acción te recomiendo pasar a pintar esos datos con jquery o framework front-end, pero supongamos que la migración será lenta, en ese caso actualizamos el contendor.

Lo que puedes hacer es refrescar el contendor div:

$("#data").load(" #data");
// el espacio en " #data"  es importante

Con esto recargamos la página pero solo esa parte específica será renderizada desde el servidor, suena extraño pero puede servirte

<div id="data">
<table class="table" id="contacto">
  <thead>
    <tr style="background-color: #C6EFCE;">
     ...
    </tr>
  </thead>
  <tbody>
  <?php foreach($todos_contacto as $todos): ?>
     <tr id="${todos.id}">
     ...
    </tr>

  <?php } endforeach ?>
  </tbody>
</table>
</div>

Otra forma si depende del servidor es mediante el id de la fila en donde:

$("#idtr").html(`<th>${data.nombre}</th>...`);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.