JQuery 倒计时不适用于数据表页面更改事件

Question

我正在开发基于优惠券的网站，我需要在该网站上使用倒计时带有数据表的脚本（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>

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

请指教

-尼克斯

Answer 1

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

  // 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>

JQuery 倒计时不适用于数据表页面更改事件

JQuery countdown not working with datatables pagechange event

jquery

datatables

jquery-datatables

jquery-countdown