Countdown timer per row entry

charlesdebruyn

Hi everyone,

I would like to add a timer per new entry on the datatable. Basically it's a Lunch app that records the DateTime when the user starts the lunch for an individual. How would I put a timer in the column that shows a countdown from 60min for example and then alert the user when the timer hits 00:00.

Here is my code so far, I have no idea how to use a timer...

var Popup, dataTable;
$(document).ready(function () {
dataTable = $("#employeeTable").DataTable({
"ajax": {
"url": "/AppTeamLunch/GetData",
"type": "GET",
"datatype": "json",
"bJQueryUI": true,
"bServerSide": true,
"sAjaxSource": "AppTeamLunch",
},
"columns": [
{ "data": "TeamName" },
{ "data": "TeamColor" },
{ "data": "UserIDStart" },
{ "data": "DateStart" },
{ timer??? },
{ "data": "Status" },
{"data":"TeamLunchID" , "render" : function (data) {
return "<a class='btn btn-warning btn-sm' onclick=PopupFormEndLunch('@Url.Action("FetchEndLunch", "AppTeamLunch")/" + data + "')><i class='fa fa-pencil'></i> End Lunch</a>";
},
"serverSide": true,
"processing": true,
"orderable": true,
"searchable": true,
"width":'auto'
}
],
"rowCallback": function (row, data, index) {
$('td', row).eq(1).css('background-color', data.TeamColor);

            },
            "language": {

                "emptyTable": "There are currently no teams on lunch.",
                "processing": "Fetching Data..."
            }
        });
    });

setInterval(function () {
dataTable.ajax.reload();
}, 5000);

colin

Hi @charlesdebruyn ,

There's a few examples on SO on how to create timers, such as this one here. As far as DataTables is concerned, that columns.render is the place to be.

Cheers,

Colin