0

Tengo el siguiente problema que no he logrado solucionar. Tengo un timer (countdown) que se genera por cada fila del datatables, que vienen de una base de datos. Esto funciona bien, el problema es que en todas las filas, me muestra el ultimo registro correspondiente a la consulta a la base de datos. En la imagen adjunta, se ve puede ver eso.introducir la descripción de la imagen aquí

Como ven en la columna tiempo, se repite el registro que es datetime y que es el ultimo de la condicion generada en mysql.

El codigo que genera, esta muestra es el siguiente:

{
    "sClass": "alignRight",
    "data": "tiempo",
    'render': function (data, type, row, meta) {
        var tiempo = data;
        var splitDate = tiempo.split(" ");
        var date = splitDate[0].split("-");
        var time = splitDate[1].split(":");
        var dd = date[2];
        var mm = date[1]-1;
        var yyyy = date[0];
        var hh = time[0];
        var min = time[1];
        var ss = time[2];

        window.countDownDate = new Date(yyyy, mm, dd, hh, min, ss).getTime();

        var x = setInterval(function() {
            var now = new Date().getTime();
            var distance = countDownDate - now;
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            document.getElementById("time-"+meta.row).innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

            if (distance < 0) {
                clearInterval(x);
                document.getElementById("time-"+meta.row).innerHTML = "EXPIRED";
            }
        }, 1000);
        return '<p id="time-'+meta.row+'"></p>';
    }
}

La variable tiempo, es la que trae los datos json desde la base de datos que es en formato datetime.

Aqui la consulta mysql:

SELECT

permisos_pedidos.tiempo

FROM permisos_pedidos

WHERE permisos_pedidos.id_cliente = '$id_cl' AND permisos_pedidos.id_pedido = permisos_pedidos.id_pedido AND etapa_abierta = 'A'

Si alguien, tiene alguna idea o se ha topado con algun problema asi, agradeceria, pudiese orientarme a como resolverlo. Si falta algo de informacion para aclarar el problema, lo subire sin problema. Desde ya, muchas gracias a todos.

10
  • Si ejecutas la consulta SQL los valores de fecha son los correctos? Y cómo invocas esa función que muestras? el 21 sep. 2018 a las 22:11
  • @JocksanCruz hola, gracias por responder. Efectivamente, la consulta al realizarla en consola, muestra los datos (fechas) correctas, diferentes para cada row generado en datatables. La funcion se invoca al momento que json es devuelto por ajax y su variable es row=['tiempo'].
    – Andres_Ha
    el 21 sep. 2018 a las 22:15
  • Y si pones un ´Console.log("time-"+meta.row)´ te generar valores distintos? el 21 sep. 2018 a las 22:20
  • me muestra: time-0 <br> time-1 <br> y se repite varias veces el mismo valor
    – Andres_Ha
    el 21 sep. 2018 a las 22:40
  • Ahora, si quitas el setInterval y solamente muestra las columnas se muestran como debe de ser? el 21 sep. 2018 a las 22:43

1 respuesta 1

0

Listo, te dejo un ejemplo de cómo lo podrías hacer, claramente tu código es más complejo, pero la idea es que tengas una base:

// Vector de tiempos
var tiempos = [];
// datos para prueba
var data = {"employees":[
    { "firstName":"John", "age":5 },
    { "firstName":"Anna", "age":10 },
    { "firstName":"Peter", "age":15 }
]};

// ciclo para agregar los HTML, se crea llena el vector
$.each( data.employees, function( i, value ) {
  $("#personas").append("<p>" + value.firstName + ": <span id='tiempoId" + i + "'>" + value.age + "</p>");
 tiempos.push(value.age);
});

// Boton para iniciar el intervalo
var button = $("button");
button.on("click", function(){
  setInterval(function() {validarTiempos()}, 1000);
})


// VALIDA LOS ITEMS EN 0
// --------------------------
// 1. Cada llamado resta 1 a todos los items
// 2. Actualiza el valor del campo segun el ID
// 2.1 Si es mayor a 0 muestra el valor
// 2.2 Si es 0 marca como "expirado"
function validarTiempos()
{
	//console.log(tiempos);
	tiempos = tiempos.map(x => x - 1);
  
  $.each(tiempos, function( index, value ) {
  	if(tiempos[index] > 0)
  		$("#tiempoId" + index).html(value);
    else
      $("#tiempoId" + index).html("Exp.");
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Personas</p>
  <div id="personas">
  
  </div>
  <button>Iniciar</button>
</div>

Ahora, lo podrías aplicar de la siguiente manera:

    window.countDownDate = new Date(yyyy, mm, dd, hh, min, ss).getTime();
//-------------
    var now = new Date().getTime();
    var distance = countDownDate - now;
    tiempos.push(distance);
//-------------
    return '<p id="time-'+meta.row+'">' + distance + '</p>';

La idea sería que al terminar la carga de los datos iniciar el interval, con esto deberia funcionar.

8
  • Muchas gracias. Me queda claro tu ejemplo, no asi la posible integracion a mi codigo. Entiendo tambien, que haces iteraciones en el $.each para cada ciclo recorrido desde el array. Pero mi pregunta radica en como asociar cada iteracion dentro mi funcion.. Si pudieses darme un idea te lo agradeceria mucho. saludos.
    – Andres_Ha
    el 23 sep. 2018 a las 2:37
  • Edit'e la respuesta, prueba a ver que tal. Para esto debes declarar el vector tiempos, iniciar el setInterval cuando terminas la carga de los datos (o antes no importaría, pues valida sobre el vector) y modificar la función validarTiempos de modo haga el cambio de formato a tipo fecha. el 23 sep. 2018 a las 9:13
  • Hice todos los cambios como me mencionaste, pero obtengo un error: Uncaught TypeError: Cannot read property 'length' of undefined que lo ubica en la linea $.each( data.tiempo, function( i, value ) {
    – Andres_Ha
    el 25 sep. 2018 a las 17:18
  • @maha1982, declaraste el vector? Tiene que quedar como global var tiempos = []; el 25 sep. 2018 a las 18:58
  • Hola, estimado, si, lo declare como global e hice todos los pasos como describiste en la publicacion. de hecho use tu mismo codigo, tal cual, poniendo fecha de prueba, haciendo la conversion de formato y arrojaba el mismo error.
    – Andres_Ha
    el 25 sep. 2018 a las 19:01

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.