How to render a Dynamic Timer (Countdown) With JavaScript and Datatable's Render?-CodePudding

I want to render a Countdown for a different time for different Products I use MVC EntityFrameWork and for client-side jQuery and JavaScript.

When You datatable's render section so you find a JavaScript SetInterval function to make it dynamic but it didn't work When I only use the JavaScript method SetTime (made by self)

The SetTimer Function gets the remaining time for products and I want This function to run again and again every second to make this dynamic

Is there any other way to perform this Action?

 table = $('#ProductTable').DataTable({
            
            "ajax": {
                "url": "/api/product/",
                "type": "GET",
                "dataSrc": ""
            },
            "columns": [
                {
                    "data": "id",
                    render: function (data, type, Product) {

                        debugger;

                        return "<div id='ProductCover'> <div id='Product-img-div'> <img src='/Content/Images/"   Product.images   "' width='200px'></div> <div style='margin-right: 50px;'> Product Name:<h5> "   Product.productName   " <h5> Product Descrption: <h5> "   Product.description   "</h5> </div> <div class='countdown'> End Time: <span class='clock'> "   **setInterval(SetTimer(Product.endBidDate),1000)**  " </span > </div > <br><div style='margin-left:50px;'> Current Highest Amount:<h5>"   Product.highestAmount   " </h5>   </div>  </div>  <button type='button' class='btn btn-primary' onclick='BidModal("   Product.id   ")'>new Bids </button> <button class='btn btn-primary' data-toggle='modal' data-target='#BuyerQuyerModal' data-whatever='#mdo' onclick='Select("   Product.id   ")'>Ask Seller</button> </div> ";
                    }
                }
            ]
        }) 
    }

This Script finds the remaining time with the End Date of the Product Sale and I call this function in HTML (datatable's render section) How can I call this with SetInterval so I can time goes in backward

    function setTimer(endTimes) {    
        var endTime = endTimes;
        timerrrr = endTime
        endTime = (Date.parse(endTime) / 1000);
        var now = new Date();
        now = (Date.parse(now) / 1000);
        var timeLeft = endTime - now;
        var days = Math.floor(timeLeft / 86400);
        var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
        var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600)) / 60);
        var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
        if (hours < "10") { hours = "0"   hours; }
        if (minutes < "10") { minutes = "0"   minutes; }
        if (seconds < "10") { seconds = "0"   seconds; }
        return `${days} : ${hours} : ${minutes} : ${seconds}`;        
    }

CodePudding user response：

I would place the setInterval function in the DataTable initComplete option, instead of in a column renderer:

initComplete: function () {
  setInterval(function () {
    doCountdowns();
  }, 1000);
}

Here is a very basic runnable demo showing that aproach:

function doCountdowns() {
  $( '.endtime' ).each(function( index ) {
    doCountdown( this ); // a td node
  });
}

function doCountdown( node ) {
  let endTime = Date.parse( $( node ).html() ) / 1000;
  let now = (Date.parse(new Date()) / 1000);
  let timeLeft = endTime - now;
  let days = Math.floor(timeLeft / 86400);
  let hours = Math.floor((timeLeft - (days * 86400)) / 3600);
  let minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600)) / 60);
  let seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
  if (hours < "10") { hours = "0"   hours; }
  if (minutes < "10") { minutes = "0"   minutes; }
  if (seconds < "10") { seconds = "0"   seconds; }
  $( node ).next("td").html( `${days} : ${hours} : ${minutes} : ${seconds}` );
}

$(document).ready(function() {

  $('#example').DataTable( {
    initComplete: function () {
      setInterval(function () {
        doCountdowns();
      }, 1000);
    }
  } );

} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

    <table id="example"  style="width:100%">
        <thead>
            <tr>
                <th>Product ID</th>
                <th>End Bid Date</th>
                <th>Time Remaining</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>123</td>
                <td >2022-12-04 13:44:35</td>
                <td></td>
            </tr>
            <tr>
                <td>456</td>
                <td >2022-11-07 06:21:12</td>
                <td></td>
            </tr>
            <tr>
                <td>789</td>
                <td >2022-10-04 17:23:00</td>
                <td></td>
            </tr>
        </tbody>
    </table>

</div>

</body>
</html>

You may need to adjust this to account for your specific data & formatting - and the fact that you are using an Ajax data source - but the approach should be the same.

As an enhancement: You may also need some logic to handle the data when the deadline is reached, otherwise you will get incorrect data displayed.