当页面从底部单击时，jquery 数据表滚动到顶部 [英] jquery datatables scroll to top when pages clicked from bottom

问题描述

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

I am using a jQuery datatable with bottom pagination. When the pages are clicked from bottom , I want it to scroll it to top, so users do not have to manually do that for longer pages. I tried using dataTables_scrollBody, but it doesn't work properly

这是我的代码:

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

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

The page scrolls to top only when you click first/last (which I think is default behaviour), but not with every page click.

推荐答案

更新.最初的答案是针对 1.9.x.在 dataTables 1.10.x 中更容易:

Update. The original answer was targeting 1.9.x. In dataTables 1.10.x it is much easier :

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

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

demo -> http://jsfiddle.net/wq853akd/

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

Also, if you're using the bootstrap version of datatables, you may notice that when using the fix, the page actually scrolls back down after scrolling to the top. This is because it is focusing on the clicked button as per this datatables.net thread. You can fix this by simply focusing on the table header after the animate call, like so:

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.这里有一个漂亮的小动画:

---

Original Answer

You should target .dataTables_wrapper and attach the event to .paginate_button instead. Here with a nice little animation :

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/

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

这篇关于当页面从底部单击时，jquery 数据表滚动到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！