当从底部单击页面时，jquery 数据表滚动到顶部

我正在使用带有底部分页的 jQuery 数据表。当从底部单击页面时，我希望它将其滚动到顶部，这样用户就不必为较长的页面手动执行此操作。我尝试使用 dataTables_scrollBody，但它无法正常工作

这是我的代码：

oTable = $('#tTable').dataTable({
    "fnDrawCallback": function(o) {
        $('dataTables_scrollBody').scrollTop(0);
     }
});

仅当您单击第一个/最后一个（我认为这是默认行为）时，页面才会滚动到顶部，但并非每次单击页面时都会滚动到顶部。

Update。最初的答案是针对 1.9.x。在 dataTables 1.10.x 中，它更容易：

table.on('page.dt', function() {
  $('html, body').animate({
    scrollTop: $(".dataTables_wrapper").offset().top
  }, 'slow');
});

演示->http://jsfiddle.net/wq853akd/

另外，如果您使用数据表的引导版本，您可能会注意到，在使用修复程序时，页面实际上在滚动到顶部后向下滚动。这是因为它专注于单击的按钮这个 datatables.net 线程。您可以通过在动画调用后简单地关注表标题来解决此问题，如下所示：

table.on('page.dt', function() {
  $('html, body').animate({
    scrollTop: $(".dataTables_wrapper").offset().top
  }, 'slow');

  $('thead tr th:first-child').focus().blur();
});

原答案

你应该瞄准.dataTables_wrapper并将事件附加到.paginate_button反而。这里有一个漂亮的小动画：

function paginateScroll() {
    $('html, body').animate({
       scrollTop: $(".dataTables_wrapper").offset().top
    }, 100);
    console.log('pagination button clicked'); //remove after test
    $(".paginate_button").unbind('click', paginateScroll);
    $(".paginate_button").bind('click', paginateScroll);
}
paginateScroll();

参见小提琴->http://jsfiddle.net/EjbEJ/