1

Tengo una tabla que se alimenta de los datos de un JSON. La tabla se actualiza cada x segundos y al llegar nuevos datos la tabla obviamente recibe una nueva fila de datos. Lo que intento hacer es agregarle un efecto (de fundido o slide, o que cambie de color por unos segundos) a esta primera fila que recién llega, pero no logro entender cómo hacerlo.

En este link hay una tabla con exactamente el mismo efecto que deseo (Es posible que se deba esperar un poco para que ocurra el efecto ya que se trata de datos en tiempo real)

Aquí va mi código:

JavaScript

<script type="text/javascript">
  $(document).ready(function(){
        refreshTable();
    });

 function refreshTable(){
    $.ajax({
        url: "ordenajson.php", 
        type: "POST",
        contentType: "application/x-www-form-urlencoded",
        dataType: "json",  
        success: function(data){                    
            $("#contenido").html('');
            if(data != null && $.isArray(data)){
                $.each(data, function(index, value){
                $("#contenido").append("<tr><td>" + value.camion + "</td><td>" + value.estado + "</td><td>" + value.tespera + "</td><td>" + value.tcarga + "</td><td>" + value.tcarga + "</td></tr>").fadeIn(3000);
                });
            }
             setTimeout(refreshTable, 2000);
        }
    });
}
</script>

HTML

<table  class="rwd-table" width='100%' id="tablajson" >
    <thead>
        <tr>
            <th width='20%'>CAMIÓN</th>
            <th width='20%'>ESTADO</th>
            <th width='20%'>T ESPERA</th>
            <th width='20%'>T CARGA</th>
            <th width='20%'>T TOTAL</th>
        </tr>
    </thead>
<tbody id='contenido'></tbody>
</table>

1 respuesta 1

3

El truco consiste en primero insertar la fila pero invisible y luego aplicar un efecto para que se muestre. Aquí un ejemplo:

$(function() {
  var tbody = $('#contenido');
  var i = 0;
  
  function load() {
    var fila = $('<tr style="display: none"><td>Hola</td><td>'+ i++ + '</td></tr>');
    tbody.append(fila);
    fila.show('slow');
    setTimeout(load, 1000);
  }

  load();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Mensaje</th>
      <th>Id</th>
    </tr>
  </thead>
  <tbody id='contenido'>
    
  </tbody>
</table>


En tu código hay 2 problemas

$("#contenido").append("<tr><td>...").fadeIn(3000);

Primero append devuelve la referencia al elemento sobre el que estás agregando el contenido, en este caso tu <tbody> "contenido". Es decir está aplicando la animación sobre el cuerpo de la tabla que ya está visible, por eso no pasa nada.

Segundo es que la fila que estás insertando también es visible desde un primer momento. Por eso es que en mi ejemplo le agrego style=display: none a la fila.

3
  • Bueno eso esta excelente. El tema es que en mi caso se recarga la tabla completa, ya que todos los datos van cambiando con el transcurso del tiempo y es necesario que toda la tabla se renueve. Al parecer ese es el problema ya que no se como hacer que solo cuando llegue un nuevo dato a la tabla (una fila nueva) ocurra el efecto. el 28 abr. 2016 a las 3:42
  • Entiendo, tú recibes todas las filas a la vez y no una por una. En ese caso lo que haría es guardar los datos que se están mostrando y en la siguiente recarga comparar ambas listas. Las filas nuevas se insertan en la tabla y las filas que ya no existen le aplicas fadeOut y removerlas. Necesitas un mecanismo para filtrarlas fácilmente, tal vez un ID que viene del servidor y no se muestra en la tabla.
    – Diego
    el 28 abr. 2016 a las 4:04
  • Eso es exactamente lo que deseo hacer pero como recién me meto en lo de Jquery lo logro hacerlo. el 28 abr. 2016 a las 12:06

Tu Respuesta

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

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