Tengo una tabla en la cual tengo distintos datos, pero tengo uno el cual quisiera actualizar cada segundo.
Esta columna tiene 2 fecha, una es la registrada en la db y la otra es la registrada en la db
mas el la duración, el resultante de ese es la segunda fecha, si la fecha registrada en la db
es mayor a la segunda fecha me dice que ya paso el tiempo estipulado, sino entonces me dice cuanto tiempo me queda.
El problema que tengo es que no encuentro como actualizar las celdas que aun les queda tiempo.
$( document ).ready(function() {
listar();
});
var listar = function(){
var table = $('#table').DataTable({
destroy: true,
filter: false,
processing: true,
serverSide: true,
autoWidth: true,
ajax: {
url: 'https://api.myjson.com/bins/tfoyt',
global: false,
method: 'get',
data: function (d) {
}
},
columns: [
{data: 0, searchable: false, orderable: false,
render: function( data, type, full, meta ){
return meta.row+1;
}
},
{
"render": function ( data, type, row ) {
return row[1];
}
},
{
"render": function ( data, type, row ) {
return row[2];
}
},
{
"render": function ( data, type, row ) {
return getTiempo(row[3]);
}
},
{
"render": function ( data, type, row ) {
console.log(row[8]);
console.log(row[3]);
let fecha_res = moment(row[8]).add(row[3], 'seconds')._d;
console.log(fecha_res);
let fecha_act = moment()._d;
console.log(fecha_act);
if( fecha_res < fecha_act){
console.log('El tiempo ha caducado');
return 'El tiempo ha caducado';
}else{
//aca es donde quisiera poder devolver el valor a las celdas que aun les queda tiempo, es decir, ejecutar el "return" cada 1 segundo
let diff = null;
function diferencia(){
diff = parseInt((fecha_res.getTime() - moment()._d) / 1000);
console.log('todavia hay chance');
console.log(diff);
console.log(getTiempo(diff));
return getTiempo(diff);
}
diferencia();
setInterval(diferencia,1000);
return getTiempo(diff);
}
}
},
{
"render": function ( data, type, row ) {
return row[4];
}
},
{
"render": function ( data, type, row ) {
return row[7];
}
},
],
order: [[1, 'asc']],
fnDrawCallback: function() {
},
language: {
},
initComplete: function (data) {
}
});
};
let getTiempo = function(time){
let seconds = time;
let numdays = Math.floor(seconds / 86400);
let numhours = Math.floor((seconds % 86400) / 3600);
let numminutes = Math.floor(((seconds % 86400) % 3600) / 60);
let numseconds = ((seconds % 86400) % 3600) % 60;
let result = '';
if(numdays > 0){
if(numdays == 1){
result += numdays + " día ";
}else{
result += numdays + " dias ";
}
}
if(numhours >0){
if(numhours == 1){
result += numhours + " hora ";
}else{
result += numhours + " horas ";
}
}
if(numminutes >0){
if(numminutes == 1){
result += numminutes + " minuto ";
}else{
result += numminutes + " minutos ";
}
}
if(numseconds >0){
if(numseconds == 1){
result += numseconds + " segundo ";
}else{
result += numseconds + " segundos ";
}
}
return result;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/locale/es.js"></script>
<table class="display nowrap" id="table" cellspacing="0" width="100%">
<thead>
<tr>
<th>Nº</th>
<th>Número</th>
<th>Fecha</th>
<th>Duración</th>
<th>Tiempo Restante</th>
<th>Ponderación</th>
<th>Docente</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Nº</th>
<th>Número</th>
<th>Fecha</th>
<th>Duración</th>
<th>Tiempo Restante</th>
<th>Ponderación</th>
<th>Docente</th>
</tr>
</tfoot>
</table>