JQuery倒计时不适用于数据表pagechange事件答案

【问题标题】：JQuery countdown not working with datatables pagechange eventJQuery倒计时不适用于数据表pagechange事件
【发布时间】：2015-04-27 07:40:15
【问题描述】：

我正在开发基于优惠券的网站，我需要在其中使用倒计时带有数据表的脚本（http://hilios.github.io/jQuery.countdown/）。

我遇到页面更改事件停止第一页的计时器并且计数在其他页面上不起作用。

这是我每次加载页面时更新计数器的代码

$('#sample_2').on( 'page.dt', function () {
    alert("page changed");
    $('[data-countdown]').each(function() {
        var $this = $(this), finalDate = $(this).data('countdown');
        $this.countdown(finalDate, function(event) {
            $this.html(event.strftime('%D days %H:%M:%S'));
        });
    }).on('finish.countdown', function(event) {
        $(this).addClass("label label-sm label-danger");
        $(this).html('This offer has expired!');
    });
} );

HTML 代码

<tr>
    <td>f2 coupon</td>
    <td>
         <div data-countdown="2015-05-18 12:09:00" class="label label-sm label-success">20 days 15:04:54</div>
    </td>
    <td class="numeric">1</td>
    <td class="numeric">1</td>      
</tr>

如有需要，请随时询问更多信息

请指教。

-尼克斯

【问题讨论】：

我想 [data-countdown] 是表格列。对吗？
我不知道问题可能是什么，但如果我遇到同样的问题，我会尝试不同的事件。看看这里：datatables.net/reference/event/#Events。也许 draw.dt ？
感谢您的快速回复@Tsalikidis。在这里我更新问题为单行添加一些 html 。您可以尝试在几行中进行一些变化，然后使用数据表分页更改页面，您将得到问题。

标签： jquery datatables jquery-datatables jquery-countdown

【解决方案1】：

您需要使用rowCallback event 的数据表插件。检查下面的代码sn-p。

  // rowCallback is what you need
  function initDataTable() {
    $('table').DataTable({
      rowCallback: function(nRow) {
        /* This is your code */
        $(nRow).find('[data-countdown]').each(function() {
          var $this = $(this),
            finalDate = $(this).data('countdown');
          $this.countdown(finalDate, function(event) {
            $this.html(event.strftime('%D days %H:%M:%S'));
          });
        }).on('finish.countdown', function(event) {
          $(this).addClass("label label-sm label-danger");
          $(this).html('This offer has expired!');
        });
      }
    });
  };

  // Ignore code below.. (I just needed something to populate this example table)
  $(document).ready(function() {
    for (var i = 0; i < 100; i++) {
      $('table tbody').append('<tr>' +
        '<td> f2 coupon </td>' +
        '<td>' +
        '<div data-countdown="2015-05-18 12:09:00" class="label label-sm label-success">20 days 15:04:54</div> ' +
        ' </td>' +
        '<td class="numeric">1</td> ' +
        ' <td class = "numeric"> 1 </td>' +
        '</tr> ');
    }

    initDataTable();
  });

<html>

<head>
  <link href="http://cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css" rel="stylesheet">

  <body>
    <table border="1">
      <thead>
        <tr>
          <th>col1</th>
          <th>col2</th>
          <th>col3</th>
          <th>col4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>f2 coupon</td>
          <td>
            <div data-countdown="2015-05-18 12:09:00" class="label label-sm label-success">20 days 15:04:54</div>
          </td>
          <td class="numeric">1</td>
          <td class="numeric">1</td>
        </tr>
      </tbody>
    </table>

  </body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="http://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
  <script src="http://cdn.rawgit.com/hilios/jQuery.countdown/2.0.4/dist/jquery.countdown.min.js"></script>

</html>

【讨论】：