Question

我是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();

Answer 1

你可以在jQuery中使用.animate和scollTop属性以及scoll的时间（以毫秒为单位），如下所示

<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>

Answer 2

最简单的方法是挂钩page.dt事件。如果您有dataTable：

var table = $('#example').DataTable({}) ;

然后你可以这样做：

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

演示 - ＆gt;的 http://jsfiddle.net/wq853akd/

如果您明确要滚动到第一行，而不只是.dataTables_wrapper的顶部，请改用此选择器：

scrollTop: $(".dataTables_wrapper tbody tr:eq(0)").offset().top

演示 - ＆gt;的 http://jsfiddle.net/wq853akd/1/

Answer 3

滚动到表格主体内的第一行

 t.on('page.dt', function() {                       
    $('.dataTables_scrollBody').animate({
        scrollTop: 0
    }, 'slow');
 });

如何在jQuery DataTables中分页时滚动到第一行

3 个答案: