当从底部点击页面时,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/

此外,如果您正在使用数据表的引导版本,您可能会注意到在使用此修复程序时,页面实际上在向上滚动到顶部后向下滚动.这是因为它根据此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/

Answer 2

由于Datatables 1.10有这个页面事件 https://datatables.net/reference/event/page

所以可以使用

$('#example_table').on( 'page.dt', function () {
    $('html, body').animate({
        scrollTop: 0
    }, 300);
} );

演示:https://jsfiddle.net/mcyhqrdx/