1

Tengo un while para mostrar en formato tabla los diferentes registros de un usuario. En la tabla muestro el nombre del producto | el peso | y el valor actual conforme el mercado.

Ese valor actual se saca a través de JSON y SetInterval, recogiendo en una variable (cada 5 segundos) el valor actual del mercado y haciendo las operaciones correspondientes para mostrar en la tabla el precio al usuario.

La idea al usar SetInterval es que el dato se actualice en tiempo real cada 5 segundos. Eso lo tengo hecho.

Lo que me gustaría es que en lugar de actualizarme el tr completo, me actualizara una celda en concreto, la del precio.

Mi código está de esta manera:

  1. Creo la tabla en el fichero home.php que es donde el usuario está permanentemente:

                 <table class="table card-table table-vcenter text-nowrap">
                   <thead>
                     <tr class="o">
                       <th>Nombre</th>
                       <th>Peso</th>
                       <th>Precio actual</th>
                     </tr>
                   </thead>
                    <tbody class="table oro"> <!-- Aquí se actualizan los TR -->
    
                    </tbody>
                 </table>
    
  2. Hago la llamada al fichero que tiene el JSON y el while con los tr:

     <script type="text/javascript">
     $(document).ready(function() {
         setInterval(function () {
           $.get("var1.php", function(data){
           if(data.length >0) {
               var recoge=data.split("|");                        
               $('.table.oro').html(recoge[0]);                                       
           }   
         });
         }, 5000, true);
     });
    
  3. En el var1.php hago el while para mostrar los tr:

             <?php
             while ($row_o=mysqli_fetch_array($sql_o)){
                 $id_oro=$row_o['id_moneda'];
                 $nombre=$row_o['nombre'];
                 $gramos=$row_o['gramos'];
    
                 $precio_final = $precio_materia * $gramos;
    
         $tabla1 =   '<tr>
                       <td>
                         '.$nombre.'
                        </td>
                       <td>
                         '.$gramos.'
                       </td>
                       <td>
                         '.$precio_final.'
                       </td>
                     </tr>';
              }
             ?>
    

Mi pregunta es ¿Se puede hacer que en lugar de actualizar todos los tr (por cada producto que tenga) actualice solo el campo de precio?

2
  • Sí se puede. El problema es que estás devolviendo código HTML para la tabla completa y no solo los datos que se deben actualizar. Primero debes generar la tabla, asignando ID a los td que se van a modificar. En la petición AJAX deberías recibir solo ID y precio de cada elemento para poder aplicar el cambio.
    – Triby
    Commented el 25 mar. 2021 a las 16:40
  • Gracias Triby, tendré que estudiar la manera de hacerlo porque soy principiante en AJAX (por no decir nulo) y lo que he logrado ha sido buscando mucha información.
    – Jok
    Commented el 25 mar. 2021 a las 16:42

1 respuesta 1

1

El primer paso es generar la tabla completa desde el inicio, agregando en TD donde muestras precio final:

  • ID, quedando td-###, donde ### representa ID de materia (producto o como sea que le llames)
  • Usando atributos de datos agregas el precio, tal como lo obtienes de la base de datos

Tu archivo home.php debería ser algo como:

         <table class="table card-table table-vcenter text-nowrap">
           <thead>
             <tr class="o">
               <th>Nombre</th>
               <th>Peso</th>
               <th>Precio actual</th>
             </tr>
           </thead>
            <tbody class="table oro"> <!-- Aquí se actualizan los TR -->

<?php
while ($row_o=mysqli_fetch_array($sql_o)){
    $id_oro=$row_o['id_moneda'];
    $nombre=$row_o['nombre'];
    $gramos=$row_o['gramos'];

    // ¿De dónde sale $precio_materia?
    $precio_final = $precio_materia * $gramos;

    // Usa comillas dobles para no tener que concatenar
    // Crear el contenido de la tabla desde el inicio
    echo "<tr>
                   <td>$nombre</td>
                   <td>$gramos</td>
                   <td id=\"td-$id_oro\" data-precio=\"$precio_materia\">
                       $precio_final
                   </td>
               </tr>";
}
?>
            </tbody>
         </table>

El archivo var1.php, solo va a enviar los datos necesarios en un JSON:

<?php
// Defines un arreglo antes de ingresar al ciclo
$datos = [];

while ($row_o=mysqli_fetch_array($sql_o)){
    $id_oro=$row_o['id_moneda'];
    $nombre=$row_o['nombre'];
    $gramos=$row_o['gramos'];

    // ¿De dónde sale $precio_materia?
    $precio_final = $precio_materia * $gramos;

    // En lugar de generar la tabla solo vas a llenar el arreglo
    $datos[] = [
        'id' => $id_oro,
        'precio' => $precio_materia,
        'final' => $precio_final
    ];
}
// Al salir del ciclo devuelves el arreglo en JSON
echo json_encode($datos);
?>

La salida de esto, será algo como:

[
    {id: 1, precio: 123, final: 456},
    {id: 2, precio: 123, final: 456}
]

Finalmente, en Javascript recibes el JSON, recorres con .forEach() y actualizas solo la celda específica para cada dato recibido:

$(document).ready(function() {
    setInterval(function () {
        $.get("var1.php", function(data) {
            // Recorrer datos recibidos
            data.forEach(item => {
                // Obtener celda por ID
                let td = $('td-' + item.id);
                // Actualizar precio (atributo de datos)
                $(td).data('precio', item.precio);
                // Actualizar precio final
                $(td).html(item.final);
            });
        }, 'json'); // El último parámetro es para decirle a jQuery qué tipo de dato esperamos
    }, 5000, true);
});

Por ahora no se está usando el precio incluido en atributo de datos, puede ser útil para realizar cálculos en Javascript, depende de si el usuario puede realizar cambios en cada fila de la tabla o no, pero eso ya sería tema de otra pregunta. Si el usuario no va a realizar cambios, entonces puedes omitir esa parte.

4
  • Muchas gracias!! he estado estudiando el código e implementándolo y hay algo que no me funciona y no logro entender. Primero, el array $datos recoge bien los datos, pero no consigo que se muestren en el td. En el ejemplo he simplificado muchas más celdas que hay en la tabla. En la que comentas // ¿De dónde sale $precio_materia? ese precio de materia es el precio que recojo del JSON, por lo que no entiendo que tenga que aparecer fuera del archivo que contiene el JSON, es decir en el while que muestra la tabla. No sé si me explico
    – Jok
    Commented el 26 mar. 2021 a las 8:01
  • @Jok, la verdad, no entendí. Por favor edita tu pregunta para colocar el código actual y explicar detalladamente cuál es el problema.
    – Triby
    Commented el 26 mar. 2021 a las 15:34
  • Disculpa, ya lo he conseguido. Lo que intento ahora es que al actualizar la página por primera vez no tarde 5 segundos en aparecer, sino que se muestre al inicio y luego ya sí en 5 segundos ir actualizando.
    – Jok
    Commented el 26 mar. 2021 a las 15:56
  • @Jok, actualicé la respuesta para mostrar cómo generar la tabla desde el inicio y actualizar con las peticiones AJAX.
    – Triby
    Commented el 26 mar. 2021 a las 16:25

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.