1

我正在开发基于优惠券的网站，我需要将倒计时脚本（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>

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

请指教。

-尼克斯

4

1 回答 1

4

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

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

于 2015-04-27T21:34:32.303 回答