我正在使用带有底部分页的jQuery数据表。从底部单击页面时,我希望它将其滚动到顶部,这样用户就不必为较长的页面手动执行此操作。我尝试使用dataTables_scrollBody,但它无法正常工作
这是我的代码:
oTable = $('#tTable').dataTable({
"fnDrawCallback": function(o) {
$('dataTables_scrollBody').scrollTop(0);
}
});
页面仅在您单击第一个/最后一个(我认为是默认行为)时滚动到顶部,而不是每次单击页面时都滚动到顶部。
答案 0 :(得分:18)
<强>更新即可。最初的答案是针对1.9.x.在dataTables 1.10.x中,它更容易:
table.on('page.dt', function() {
$('html, body').animate({
scrollTop: $(".dataTables_wrapper").offset().top
}, 'slow');
});
演示 - &gt;的 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();
看小提琴 - &gt;的 http://jsfiddle.net/EjbEJ/ 强>
答案 1 :(得分:6)
由于Datatables 1.10存在此页面事件 https://datatables.net/reference/event/page
所以可以使用
$('#example_table').on( 'page.dt', function () {
$('html, body').animate({
scrollTop: 0
}, 300);
} );
答案 2 :(得分:2)
这对我有用。
$(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;
}
}
});
} );
答案 3 :(得分:2)
我也在使用数据表,而Allan的解决方案(found here)对我来说非常合适。
$(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;
}
}
});
} );
答案 4 :(得分:0)
上述答案都不适合我。这是我的解决方案。
$("#divContainingTheDataTable").click(function(event){
if ($(event.target).hasClass("paginate_button")) {
$('html, body').animate({
scrollTop: $("#divContainingTheDataTable").offset().top
}, 200);
}
});
我试过瞄准.paginate_button,但似乎从来没有开火过。我的方法检查包含数据表的div,如果单击分页按钮,页面会向上滚动到容器的顶部。
答案 5 :(得分:0)
感谢davidkonrad。但是当我使用他的代码时,在我点击paginate按钮后,页面滚动到顶部然后在加载数据后滚动到底部。
我在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
答案 6 :(得分:0)
对于使用数据表引导版本的用户:
您可能会注意到,在使用上面接受的答案中的修复程序时,页面实际上滚动到顶部之后向下滚动到分页控件。这是因为它专注于根据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();
});
请注意:已完成blur()
的链接,因此您不会在th:first-child
上看到任何集中的样式。