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

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

这是我的密码：

oTable=$（'#tTable'）。数据表({
“fnDrawCallback”：函数（o）{
$（'dataTables_scrollBody'）。scrollTop（0）；
}
});

---

仅当您单击first/last（我认为这是默认行为）时，页面才会滚动到顶部，而不是每次单击页面时

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

table.on（'page.dt'，function（）{
$（'html，body'）。设置动画({
scrollTop:$（“.dataTables_包装”）.offset（）.top
}“慢”）；
});

演示->

此外，如果您使用的是datatables的引导版本，您可能会注意到，在使用修复程序时，页面实际上会在滚动到顶部后向下滚动。这是因为它将焦点放在按的单击按钮上。您只需在animate调用后关注表标题即可解决此问题，如下所示：

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

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

---

原始答案 您应该以

.dataTables\u wrapper

为目标，将事件附加到

.paginate\u按钮

。这里有一个漂亮的小动画：

函数分页滚动（）{
$（'html，body'）。设置动画({
scrollTop:$（“.dataTables_包装”）.offset（）.top
}, 100);
console.log（'pagination button clicked'）；//测试后删除
$（“.paginate_按钮”）。取消绑定（'单击'，分页滚动）；
$（“.paginate_按钮”）.bind（'单击'，分页滚动）；
}
分页滚动（）；

---

看小提琴->这对我来说很好

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

---

以上所有答案对我都不起作用。这是我的解决办法

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

---

我试着瞄准，但它似乎从未开火。我的方法检查包含datatable的div，如果单击分页按钮，页面将滚动到容器顶部。

因为Datatables 1.10存在此页面事件

所以你可以用

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

---

演示：

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

我在StackOverFlow和Datatables论坛中合并了多篇文章

我定义了一个全局变量：

var isScroll = false    

单击分页按钮时，将其设置为

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，我也在使用datatables，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;
        }
      }
    });
} );

---

对于使用数据表引导版本的用户：

您可能会注意到，当使用上面接受的答案中的修复时，页面实际上会在滚动到顶部后向下滚动到分页控件。这是因为它将焦点放在按单击的分页按钮上。您只需在调用animate后关注表标题即可解决此问题，如下所示：

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

上看不到任何聚焦样式。谢谢，这在大多数情况下都有效，但当您单击第1页、第2页时，它会滚动，但在第3页时，它不会滚动，它具有随机行为。页面滚动2-3次点击，然后停止。@user2675939，哦，是的-你完全正确！！我没想到。这是因为dataTables会重新创建一些按钮，从而在每次分页时重置事件。示例：如果您只是向前走，情况会很好，但是向后走，事件会被重置，因为数据表必须更改这些按钮的行为（活动等）。解决方案是每次触发事件本身时，将事件与所有分页按钮解除绑定/绑定。请参阅上面的更新和更新的小提琴。这很有效，谢谢！回答得很好。但是，如果您想滚动到页面顶部（在我的例子中，一个粘性标题覆盖了部分表格），可以使用

$（“html，body”）.animate（{scrollTop:0}，“slow”）考虑
$（“.paginate_按钮：未（.disabled）”）
以避免在单击禁用的下一个/上一个按钮时滚动。我使用了上面的代码。当我单击paginate按钮时，滚动到顶部，但在加载数据后，返回到页面底部。为什么？太好了。非常感谢。你的回答是最好的。