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

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

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/

Answer 3

这对我来说很有效。

$(document).ready(function() {
    var oldStart = 0;
    $('#example').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "fnDrawCallback": function (o) {
            if ( o._iDisplayStart != oldStart ) {
                var targetOffset = $('#example').offset().top;
                $('html,body').animate({scrollTop: targetOffset}, 500);
                oldStart = o._iDisplayStart;
            }
        }
    });
} );

Answer 4

我也在使用数据表，Allan 的解决方案（在这里找到）对我来说非常有效。

$(document).ready(function() {
    var oldStart = 0;
    $('#example').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "fnDrawCallback": function (o) {
        if ( o._iDisplayStart != oldStart ) {
            var targetOffset = $('#example').offset().top;
            $('html,body').animate({scrollTop: targetOffset}, 500);
            oldStart = o._iDisplayStart;
        }
      }
    });
} );

Answer 5

谢谢大卫康拉德。但是当我使用他的代码时，单击分页按钮后，页面滚动到顶部，然后在加载数据后，滚动回底部。

我合并了 StackOverFlow 和 Datatables 论坛中的多篇帖子。

我定义了一个全局变量：

var isScroll = false    

当单击分页按钮

isScroll

设置为

true

时：

$(document).on('click', '.paginate_button:not(.disabled)', function () {
    isScroll = true;
});

最后：

$(document).ready(function () {
    $('#myDataTable').DataTable({
        ...
        "fnDrawCallback": function () {
            if (isScroll) {
                $('html, body').animate({
                    scrollTop: $(".dataTables_wrapper").offset().top
                }, 500);
                isScroll = false;
            }
        },
        ...
    });
});

感谢@0110

Answer 6

以上答案都不适合我。这是我的解决方案。

$("#divContainingTheDataTable").click(function(event){
    if ($(event.target).hasClass("paginate_button")) {
        $('html, body').animate({
             scrollTop: $("#divContainingTheDataTable").offset().top
        }, 200);
    }
});

我尝试瞄准 .paginate_button 但它似乎从未触发。我的方法检查包含数据表的 div，如果单击分页按钮，页面会向上滚动到容器的顶部。

Answer 7

对于那些使用引导版数据表的人：

您可能会注意到，当使用上面接受的答案中的修复程序时，页面实际上在滚动到顶部后向下滚动回分页控件。这是因为它根据this datatables.net thread专注于单击的分页按钮。您可以通过在动画调用后简单地关注表标题来解决此问题，如下所示：

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

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

注意：链接的

blur()

' 已完成，这样用户就不会在

th:first-child

上看到任何聚焦样式。