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

Question

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

这是我的代码:

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

仅当您单击第一个/最后一个(我认为这是默认行为)时，页面才会滚动到顶部，而不是每次单击页面时。

Answer 1

更新 .最初的答案是针对 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/

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

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();

见 fiddle -> http://jsfiddle.net/EjbEJ/