在數據表中動畫滾動垂直

我想使用數據表顯示所有數據。但我想這個數據自動（動畫）滾動每行每3秒在數據表中動畫滾動垂直

這是我的代碼，這是我jsfiddle

我要顯示在大屏幕上的數據。

<html> 
<head> 
     <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> 
     <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
     <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
     <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css"> 
     <script type="text/javascript" src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script> 
     <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css"> 
     <script type="text/javascript" src="//cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.js"></script> 
     <style type="text/css"> 
     table th:nth-child(3), td:nth-child(3) { 
     display: none; 
     } 
     </style> 
     <title>jQuery Datatables responsive example</title> 
     <script type='text/javascript'> 
     $(window).load(function(){ 
      $(document).ready(function() { 
      $('#example').DataTable({ 
      "scrollX": true, 
      "animate": true, 
      "bLengthChange": false, 
      "bFilter": false, 
      "bInfo" : false, 
      "paging": false 
      }); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </thead> 

     <tfoot> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </tfoot> 
     <tbody> 
      <tr> 
       <td>Tiger Nixon</td> 
       <td>System Architect</td> 
       <td>Edinburgh</td> 
       <td>61</td> 
       <td>2011/04/25</td> 
       <td>$320,800</td> 
      </tr> 
      <tr> 
       <td>Garrett Winters</td> 
       <td>Accountant</td> 
       <td>Tokyo</td> 
       <td>63</td> 
       <td>2011/07/25</td> 
       <td>$170,750</td> 
      </tr> 
      <tr> 
       <td>Ashton Cox</td> 
       <td>Junior Technical Author</td> 
       <td>San Francisco</td> 
       <td>66</td> 
       <td>2009/01/12</td> 
       <td>$86,000</td> 
      </tr> 
      <tr> 
       <td>Cedric Kelly</td> 
       <td>Senior Javascript Developer</td> 
       <td>Edinburgh</td> 
       <td>22</td> 
       <td>2012/03/29</td> 
       <td>$433,060</td> 
      </tr> 
     </tbody> 
    </table> 
</body> 

</html>

幫助我，thanss

來源

2017-02-14 Muhamad Ridwansyah

您可以通過用戶delay()這樣的：

$(document).ready(function() { 
    $('#example').DataTable({ 
     "scrollX": true, 
     "animate": true, 
     "bLengthChange": false, 
     "bFilter": false, 
     "bInfo" : false, 
     "paging": false 
    }); 

    $('#example > tbody > tr').each(function() { 
    $('html, body').animate({ 
     scrollTop: $(this).offset().top 
    }, 200).delay(2800);   
    }); 

});

fiddle

來源

2017-02-14 08:34:18

啊，感謝的兄弟。這是工作，但最後的數據。這可以滾動到頂部並再次滾動嗎？ –

可以滾動到頂部並再次滾動嗎？ –

在數據表中動畫滾動垂直

回答

相關問題