0

Como podria integrar un setinterval de 1 seg a esto:

<div class="table-responsive">
<table id="listado" class="table table-striped">
 <thead>
  <tr>
   <th>N° PROCESO</th>
   <th>TECNICO</th>
   <th>FECHA ENT. INTERNA</th>
   <th>PROCESO</th>
  </tr>
 </thead>
</table>
</div>
<script>
$(document).ready(function() {
var table = $('#listado').DataTable({
"ajax":{
  "method":"GET",
  "data": {idped: <?php echo $idped?>, etp : <?php echo $etapa?>, folio : <?php echo $fol?>},
  "url" : url.php',
},
"columns" : [
{
          "sClass": "alignRight",
          "data" : "folio"
        },{
          "sClass": "alignRight",
          'data' : null,
           'render': function (data, type, row, meta) {
            var nom = row['nombres'];
            var ape = row['apellidos'];
            return ''+nom+'&nbsp;'+ape+'';
           }
        },{
      <!-------- AQUI NECESITO EL SETINTERVAL --------->
        "sClass": "alignRight",
        "data" : "fecha_tope",
        "render": function (data) {
        var now = new Date().getTime();
            return moment(now).countdown(data).toString();
         }
       <!--------------------------------------------------->
        },{
        "sClass": "alignRight",
        "data" : "nom_etapa"
        }
      ],

      "order": [
        [0, 'asc']
      ],
      "iDisplayLength": 25,
      "language": {
          "emptyTable": "SIN REGISTROS",
          "infoEmpty": "",
          "search": "Buscar _INPUT_ ",
          "info": "Mostrando Pagina _PAGE_ de _PAGES_",
          "lengthMenu": "Mostrando _MENU_ Registros",
          "infoFiltered": "(Busqueda Desde _MAX_ Registros Totales)",
          "paginate": {
            "next": "Siguiente",
            "previous": "Anterior"
          }
      },

    });

});
el codigo hace un countdown con moment.js y me lo muestra en dias, horas, minutos y segundos, pero necesito que se actualice cada 1 seg solo ese row y no tabla completa para que parezca un reloj contador hacia atras (count down). Alguna idea? Saludos y gracias.

6
  • Si no pones ningún código de tu tabla creo que nadie te podrá ayudar
    – abrahamhs
    Commented el 21 nov. 2018 a las 20:31
  • @abrahamhs no veo la necesidad de poner mas codigo. lo que puse ahi, es un reloj contador que se genera a traves de moment.js, countdown.js y moment-countdown.js. lo que necesito es solo ver la posibilidad de integrar un set interval en ese row. saludos
    – Andres_Ha
    Commented el 21 nov. 2018 a las 20:54
  • pregunta necesitas que el setInterval este en cada fila o solo en una en especifico??
    – abrahamhs
    Commented el 21 nov. 2018 a las 23:20
  • @abrahamhs lo ideal seria poner el setinterval en el row que esta comentado, porque es ahi donde debe ir el countdown. Cabe señalar que la tabla es dinamica y puede contener uno o mas registros. Saludos y gracias por cualquier ayuda u orientacion al respecto.
    – Andres_Ha
    Commented el 21 nov. 2018 a las 23:26
  • Es que creo que estas confundido, lo que comentaste es una celda (un td), ya que un row lo representa toda la definición de columns, no una sección entre llaves. Una sección entre llaves es un td (una celda) no un row (tr).
    – abrahamhs
    Commented el 21 nov. 2018 a las 23:34

2 respuestas 2

1

En tu html debes colocar un id a esa celda para poder seleccionarla:

<td><span id='demo' class="changemade"></span></td>

Luego en el datatables inicializar esa celda:

"render": function (data) {
       return  new Date().getTime();  
 }

Por ultimo en el ready levantas el interval y en cada ejecucion exploras todas las filas y haces el calculo en cada celda:

$(document).ready(function() {
idInterval=setInterval(function(){
    table.column( 0 ).data().each( function ( value, index ) {
            var valor = document.getElementById('demo').innerHTML;
            var x = moment(valor).subtract(1, 'seconds');//Resto el segundo
            $(".changemade").html(x._d);
            //Estas dos actualizan el datatables
            var UpdateTD = $(".changemade").parent('td');
            table.cell( UpdateTD ).data( UpdateTD.html()).draw();
        } );
}, 1000);    
$( '.changebutton' ).on( 'click', function () {
    clearInterval(idInterval);
}); 
});

Agregue un botón para detener el setInterval. Si usas un class la función each no tiene sentido pero todas las celdas tendrán el mismo valor. Si usas id todas las celdas tendrán su propio valor pero tienes que usar each. https://jsfiddle.net/jx4ywfk9/

1
  • perfecto, muchas gracias por tu ayuda y orientacion. Saludos.
    – Andres_Ha
    Commented el 25 nov. 2018 a las 20:05
0

esto más o menos seria lo que necesitas, pero si quieres cancelarlo debes guardar el setInterval en una variable.

"render": function (data) {
       var now = new Date().getTime();
       return setInterval(function(){
          return moment(now).countdown(data).toString();
       }, 1000);
     }
5
  • hola estimado, gracias por tu respuesta, pero no funciona, no me muestra nada en ese row y tampoco da error. Alguna idea del porque? Saludos y gracias nuevamente.
    – Andres_Ha
    Commented el 21 nov. 2018 a las 21:02
  • Hola, olvide agregar un return, podrias revisarlo de nuevo ?
    – elporfirio
    Commented el 21 nov. 2018 a las 21:24
  • agregue tu modificacion, pero ahora me imprime 4 y 5 en los lugares donde deberian ir los dias, minutos y segundos en retroceso. Vi el json y al parecer esos 4 y 5 son los indices de otros datos que vienen en la cadena json y no las fechas datetime correspondientes. Mencionar que tampoco dar error de ningun tipo.
    – Andres_Ha
    Commented el 21 nov. 2018 a las 22:01
  • es verdad data debe perder persistencia, entonces si es necesario colocar el resto del codigo para saber que dato esta ingresandose, o de plano crea un codesanbox.io
    – elporfirio
    Commented el 21 nov. 2018 a las 22:48
  • acabo de editar la pregunta y puse la tabla completa. Si necesitas algo mas, con gusto respondere a la brevedad. Saludos y muchas gracias por todo.
    – Andres_Ha
    Commented el 21 nov. 2018 a las 23:04

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.