jQuery 添加行时数据表滚动到底部

Question

我希望我的 DataTable 在添加行时滚动到底部。我已针对此问题尝试了多个修复，但其中none 有效。

测试解决方案：

How to load table in Datatables and have it scroll to last record automatically on load
Jquery DataTable auto scroll to bottom on load

其中...

我认为我的案例与其他案例的区别在于我使用的 DataTable 和 D 大写。

无论如何，这是我当前的代码：

var table = $('#example').DataTable({
          "createdRow": function( row, data, dataIndex ) 
          {
             $(row).attr('id', 'row-' + dataIndex);
          },
          "bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bInfo": false,
        "bAutoWidth": false,
        "scrollY":        $(window).height()/1.5,
        "scrollCollapse": true,
        "paging":         false,
   });

   for(var i = 1; i <= 20; i++){
      table.row.add([ 
         i,
         'action'+i,
      ]);
   }  

   table.draw();

   table.rowReordering();

如果添加新行时 table 滚动到底部就好了..

Answer 1

解决方案

要滚动到 table 的底部，请使用以下代码：

var $scrollBody = $(table.table().node()).parent();
$scrollBody.scrollTop($scrollBody.get(0).scrollHeight);

演示

$(document).ready( function () {
   var table = $('#example').DataTable({
      "createdRow": function( row, data, dataIndex ) {
         $(row).attr('id', 'row-' + dataIndex);
        console.log($(row).closest('table').parent());
      },
      "scrollY":        $(window).height()/1.5,
      "scrollCollapse": true,
      "paging": false
   });

   $('#btn-add').click(function(){    
      for(var i = 1; i <= 10; i++){
         table.row.add([ 
            i,
            i + '.2',
            i + '.3',
            i + '.4',
            i + '.5',
            i + '.6'
         ]);
      }  
   
      table.draw();      

      // Scroll to the bottom
      var $scrollBody = $(table.table().node()).parent();
      $scrollBody.scrollTop($scrollBody.get(0).scrollHeight);
   });
  
   table.rowReordering();
} );

<!DOCTYPE html>
<html>

<head>
<meta charset=utf-8 />
<title>jQuery DataTables</title>  
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/mpryvkin/jquery-datatables-row-reordering/95b44786cb41cf37bd3ad39e39e1d216277bd727/media/js/jquery.dataTables.rowReordering.js"></script>
</head>
  
<body>
  
<button id="btn-add" type="button">Add records</button>
  
<table id="example" class="display" 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>
</tbody>
</table>
</body>
</html>

jQuery 添加行时数据表滚动到底部

jQuery Datatables scroll to bottom when a row is added

html

javascript

jquery

scroll

datatables

解决方案

演示