Datatables shows last record of a timer countdown

Question

Datatables shows last record of a timer countdown

Navigation

#1 by (0 votes)

0

I have the following problem that I have not been able to solve. I have a timer (countdown) that is generated by each row of the datatables, which come from a database. This works well, the problem is that in all the rows, it shows me the last record corresponding to the query to the database. In the attached image, you can see that.

As you can see in the time column, the record that is datetime is repeated and that is the last one of the condition generated in mysql.

The code that it generates, this sample is the following:

{
    "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>';
    }
}

The time variable is the one that brings the data json from the database that is in datetime format.

Here's the mysql query:

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'

If someone, has any idea or has run into any problem like that, I would appreciate, could guide me how to solve it. If some information is missing to clarify the problem, I will upload it without problem. Of course, thank you very much everyone.

mysql json ajax datatables

asked by maha1982 21.09.2018 в 20:36

source

1 answer

RuntimeException no server to serve request Background image figure first when doing onclick

score 0 · Answer 1

Ready, I'll give you an example of how you could do it, clearly your code is more complex, but the idea is that you have a 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>

Now, you could apply it in the following way:

    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>';

The idea would be that when the loading of the data ends, start the interval, with this it should work.