Countdown timer per row entry

Countdown timer per row entry

charlesdebruyncharlesdebruyn Posts: 1Questions: 1Answers: 0

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

Answers

  • colincolin Posts: 2,073Questions: 0Answers: 380

    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

Sign In or Register to comment.