如何在 jQuery DataTables 中的分页期间滚动到第一行
Posted
技术标签:
【中文标题】如何在 jQuery DataTables 中的分页期间滚动到第一行【英文标题】：How to scroll to first row during pagination in jQuery DataTables 【发布时间】：2017-10-29 18:29:55 【问题描述】：我是 DataTables 的新手，我正在使用它来显示我从数据库中获取的内容。
当我从页面底部单击分页按钮时，我无法滚动到页面顶部或第一行。
$.ajax(
contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
type: "GET",
url: "xyz",
data: dataString,
async: "false",
datatype: "json",
success: function(response)
writeResultTable();
var obj = parseJSONfromSearch(response);
$('#tableId').DataTable(
data: obj,
"bJQueryUI": true,
"bPaginate" : true,
"sPaginationType" : "simple",
"bServerSide": false,
"fixedHeader": true,
columns : [
"targets": [0],
"sortable" : true,
"render":function(data, type, full, meta)
return '<a href="'+full.url+'" target="_blank">' + full.TitlePath + '</a>' + "<br\>" + "<br\>" + full.Description;
],
"sDom" : '<"top"l<"divline"ip>>rt<"bottom"<"divline"ip>><"clear">',
"sAutoWidth" : true,
"fnDrawCallback": function(o)
moveToTop();
);
,
error: function(response, status, error )
alert("error123");
alert(status);
alert(error);
);
function moveToTop()
window.scrollTo(0, 0);
我尝试了以下几种方法，但没有任何效果：-
function paginateScroll()
$('html, body').animate(
scrollTop: $(".dataTables_wrapper").offset().top
, 500);
console.log('pagination button clicked');
$(".ui-button").unbind('click', paginateScroll);
$(".ui-button").bind('click', paginateScroll);
paginateScroll();
【问题讨论】：
这是你想要的吗？ - ***.com/questions/21609257/… 我几乎尝试了此页面/网站上提供的所有内容，但没有任何效果。我不知道我在哪里犯错。 :( @ParaBolt，是的，这个答案需要更新。它针对的是dataTables 1.9.x，谢谢提醒。 【参考方案1】：您可以在 JQuery 中使用带有 scollTop 属性和 scoll 时间（以毫秒为单位）的 .animate，如下所示
<html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function scrollSmooth()
$('html, body').animate(
scrollTop: $("#demo").offset().top
, 1000);
</script>
<body>
<div id="demo" style="background: pink">ScrollTo This</div>
Sample Data<br /><br><br><br>
Sample Data<br /><br><br><br>
Sample Data<br /><br><br><br>
Sample Data<br /><br><br><br>
Sample Data<br /><br><br><br>
Sample Data<br /><br><br><br>
Sample Data<br /><br><br><br>
Sample Data<br /><br><br><br>
Sample Data<br /><br><br><br>
Sample Data<br /><br><br><br>
Sample Data<br /><br><br><br>
Sample Data<br /><br><br><br>
<button onclick="scrollSmooth()">Click</button>
</body>
</html>
【讨论】：
试过但没用。只是为了添加我在 Jquery Datatable 的 fnDrawCallback 中调用一个 javascript 函数。 '"fnDrawCallback": function(o) moveToTop(); function moveToTop() $('html, body').animate( scrollTop: $("#id_2").offset().top , 1000); ' 其中 id_2 是包含数据表的 div。【参考方案2】：最简单的方法是挂钩page.dt 事件。如果你有一个数据表：
var table = $('#example').DataTable() ;
那么你可以这样做：
table.on('page.dt', function()
$('html, body').animate(
scrollTop: $(".dataTables_wrapper").offset().top
, 'slow');
);
演示 -> http://jsfiddle.net/wq853akd/
如果您明确想要滚动到第一行，而不仅仅是 .dataTables_wrapper 的顶部，请改用此选择器：
scrollTop: $(".dataTables_wrapper tbody tr:eq(0)").offset().top
演示 -> http://jsfiddle.net/wq853akd/1/
【讨论】：
你好大卫，是的，我终于能够解决这个问题了。我解决问题的方法是我从 fnDrawCallback "fnDrawCallback" 调用了一个 javascript 函数：function(o) moveToTop();在这个函数中，我只获取包含表格的 div 的 id 并将其移至顶部，如下所示： - var table1 = document.getElementById('content'); table1.scrollTop =0;【参考方案3】：滚动到表格主体内的第一行
t.on('page.dt', function()
$('.dataTables_scrollBody').animate(
scrollTop: 0
, 'slow');
);
【讨论】：
以上是关于如何在 jQuery DataTables 中的分页期间滚动到第一行的主要内容，如果未能解决你的问题，请参考以下文章
如何在按钮单击时启用和禁用 jquery dataTables 的分页
jquery dataTables 默认的分页样式在右下角，怎么自由调整？