Countdown+Datatables per each row

maha1982

Hello everyone.
I have the following problem
I need to implement a table where, for each row, a countdown with data coming from the database is generated.
This is my code:

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

        }
    }

This works fine, but the problem is that the last record in the database is repeated in each row of the table.
Someone knows how to solve it.
I appreciate your help.

kthorngren

The problem is that columns.render only runs when the table is redrawn. Using setInterval inside columns.render is not going to give the desired results.

I would look at putting your setInterval function in initComplete to start the interval once the Datatable init is done.

Instead of using document.getElementById to set the data you will want to use a Datatables API like cell().data() or row().data().

Kevin

maha1982

Hello, thank you very much for your comment.
What can I use instead of columns.render?

colin

As Kevin said, put a timer into initComplete and update the cells with cell().data(). It would also be worth looking at Moment.js for the time calculations, it'll be far more efficient.

C

maha1982

colin, thanks a lot for answer. Can you give some example how to do that, please. Am a just starting with datatables. i read de information about cell.data() but can´t stand how can i mix that with my code. Thanks again

colin

Hi @maha1982 ,

This example here is using the last example on the cell().data() page. Hopefully that will get you started,

Cheers,

Colin