2

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>

2 respuestas 2

2

Intente resolverlo, pero fuera del DataTable, utilizando el código directo de la tabla HTML, funciona mas o menos, parece que tengo un detalle con la hr aún así, espero que te pueda ser de ayuda:

$( document ).ready(function() {
    listar();    
    
    setInterval(updateColum,1000);
});

function updateColum(){
  var rows = $('#table tbody tr');
  $.each(rows, function(i,v){
    var dato = "";
    //console.log(v);
    //console.log(row[1]);
    //console.log(row[3]);
    var fechaHr = $($(v).find('td')[2]).text();
    var fecha = $($(v).find('td')[2]).text().split(' ')[0];
    var hora = $($(v).find('td')[2]).text().split(' ')[1];
    let fecha_res = moment(fechaHr,'DD/MM/YYYY hh:mm:ss A')._d;///.add(row[3], 'seconds');;
    //let fecha_res = moment(fecha,'DD/MM/YYYY')._d;///.add(row[3], 'seconds');;
    console.log(fechaHr);
    console.log(fecha_res);
    //console.log(fecha_res);
    let fecha_act = moment()._d;
   // console.log(fecha_act);
   // console.log(fecha_act);

    if( fecha_res < fecha_act){
        //console.log('El tiempo ha caducado');
        dato = '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));
            dato = getTiempo(diff);
        }
        diferencia();
        //setInterval(diferencia,1000);
        dato = getTiempo(diff);
    }
    $($(v).find('td')[4]).text(dato);
    
    //$(v + ' td:eq(4)').text(dato);
  });
}

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[1]);
                    //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>

4
  • Genial, la única parte que no veo es donde se agrega el tiempo de duración a la fecha. Lo solvente hace un rato de otra manera, pero si puedes solucionarlo a tu manera creo que es mas ético :D
    – bypabloc_
    Commented el 28 jul. 2017 a las 5:25
  • @PabloContreras si lo resolviste, puedes publicar tu respuesta para que la solución quede registrada en la comunidad y podamos ayudar a mas personas. Aquí mismo responde tu pregunta.. :) Commented el 28 jul. 2017 a las 17:11
  • Listo, ya publique mi respuesta :D solo no quería despreciar tu esfuerzo que siempre son geniales ;) gracias de igual forma
    – bypabloc_
    Commented el 28 jul. 2017 a las 18:19
  • @PabloContreras excelente :D Commented el 28 jul. 2017 a las 20:57
2

La solucion que encontre fue crear un elemento div con una clase dedicada a el y al finalizar la tabla, en initComplete, con una funcion que se ejecute cada segundo que recorra todos los div y que compruebe las fechas que estan almacenadas en los atributos data- que le asigne.

$( 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 ) {
                        let fecha_res = moment(row[8]).add(row[3], 'seconds')._d;
                        let fecha_act = moment()._d;
                        if( fecha_res < fecha_act){
                            return '<div class="tiempo_restante" data-row8="'+row[8]+'" data-row3="'+row[3]+'">El tiempo para el examen ha expirado</div>';
                        }else{
                            let diff = parseInt((fecha_res.getTime() - fecha_act) / 1000);
                            return '<div class="tiempo_restante" data-row8="'+row[8]+'" data-row3="'+row[3]+'">'+getTiempo(diff)+'</div>';
                        }
                }
            },
            {
                "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) {
                function diferencia(){
                    let tiempo_restante = document.getElementsByClassName("tiempo_restante");
                    let fecha_act = moment()._d;
                    for(var i = 0; i < tiempo_restante.length; i++){
                        let fecha_res = moment(tiempo_restante[i].getAttribute('data-row8')).add(tiempo_restante[i].getAttribute('data-row3'), 'seconds')._d;
                        if( fecha_res < fecha_act){
                            tiempo_restante[i].innerHTML = 'El tiempo para el examen ha expirado';
                        }else{
                            let diff = parseInt((fecha_res.getTime() - fecha_act) / 1000);
                            tiempo_restante[i].innerHTML = getTiempo(diff);
                        }
                    }
                }
                diferencia();
                setInterval(diferencia,1000);
        }
    });
};


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>

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.