我正在使用带有底部分页的jQuery数据表。当从底部点击页面时，我希望它将页面滚动到顶部，以便用户不必为较长的页面手动执行该操作。我试着用dataTables_scrollBody，但它不能正常工作jquery datatables从底部点击页面时滚动到顶部
这里是我的代码：
oTable = $('#tTable').dataTable({
"fnDrawCallback": function(o) {
$('dataTables_scrollBody').scrollTop(0);
}
});
页面滚动到当您单击只有顶部第一/最后（我认为这是默认的行为），但而不是每次点击页面。
更新。原来的答案是针对1.9.x.在数据表1.10.x这是很容易：
table.on('page.dt', function() {
$('html, body').animate({
scrollTop: $(".dataTables_wrapper").offset().top
}, 'slow');
});
演示 - >http://jsfiddle.net/wq853akd/
[原来的答案]您应该针对.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/
这摸索出适合我。
$(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;
}
}
});
});
完美。谢谢！ – mrDinkelman
以上答案都不适用于我。这是我的解决方案。
$("#divContainingTheDataTable").click(function(event){
if ($(event.target).hasClass("paginate_button")) {
$('html, body').animate({
scrollTop: $("#divContainingTheDataTable").offset().top
}, 200);
}
});
我试图靶向.paginate_button但它似乎从来没有开火。我的方法检查包含数据表的div，如果您单击分页按钮，页面会滚动到容器的顶部。
由于数据表1.10有这个页面事件 https://datatables.net/reference/event/page
所以可以使用
$('#example_table').on('page.dt', function() {
$('html, body').animate({
scrollTop: 0
}, 300);
});
您的回答是最好的。 –
感谢的从davidkonrad。但是当我使用他的代码时，在点击分页按钮后，页面滚动到顶部，然后在加载数据后滚动到底部。
我在StackOverFlow和Datatables论坛中组合了多篇文章。
我定义一个全局变量：
var isScroll = false
当点击PAGINATE按钮的isScroll设置为true：
$(document).on('click', '.paginate_button:not(.disabled)', function() {
isScroll = true;
});
最后：从@ 0110
$(document).ready(function() {
$('#myDataTable').DataTable({
...
"fnDrawCallback": function() {
if (isScroll) {
$('html, body').animate({
scrollTop: $(".dataTables_wrapper").offset().top
}, 500);
isScroll = false;
}
},
...
});
});
谢谢
谢谢，这在大多数情况下都有效，但是当你点击页面1，页面2时，它会滚动，但是页面3不滚动，它具有随机行为。该页面滚动2-3次点击，然后停止。 – user2675939
@ user2675939，哦，是的 - 你是绝对正确的！没想到那个。这是因为dataTables重新创建了一些按钮，并且每次分页时都会重置这些事件。例如：如果您只是前进，它会进展顺利，但是由于dataTable必须更改这些按钮的行为（活动等等），所以事件会被重置。解决方案是在每次事件本身被触发时将事件解除绑定/绑定到所有paginate_buttons。请参阅上面的更新和更新的小提琴。这无效地工作。 – davidkonrad
谢谢大卫！效果很好。 – user2675939