数据表在页面更改时滚动顶部

Datatables scroll top on page change

本文关键字：滚动 顶部 数据表      更新时间：2023-09-26

>我有一个问题。我想在使用数据表时滚动页面更改的表格顶部。

我添加了以下代码

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

（目前它滚动到页面顶部）但它并不完全有效。

当我单击其他页面时，页面会滚动到顶部，但是在加载数据后，它会再次向下滚动。我不知道发生了什么（我不是 JavaScript 大师），但似乎 Datatables 在加载数据后运行额外的操作，再次滚动到底部。有没有办法防止数据表（可能）在加载数据后向下滚动？

我可以使用draw.dt而不是page.dt，它可以正常工作，但它会引起其他副作用。如果表格放置在页面上的某个位置，则在加载数据后，它将被滚动到页面顶部（或表格顶部），我只想在更改页面后运行它。

我想

通了，但花了我很多时间。问题是当我使用引导版本时：

<script type="text/javascript" src="https://cdn.datatables.net/t/bs/jq-2.2.0,dt-1.10.11/datatables.min.js"></script

当我把它改成：

<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/t/dt/dt-1.10.11/datatables.min.js"></script>

它工作正常。

所以最后我注意到我可以这样包含它（数据表和引导插件在单独的文件中）：

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>

问题出在最后一个文件中（此处未缩小版本 - https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.js）。在此文件中有一行：

$(host).find( '[data-dt-idx='+activeEl+']' ).focus();

这一行导致当我在加载数据后单击按钮更改页面时，焦点再次移动到页面底部。当我在本地使用此文件并注释此行时，现在当我使用：

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

我被移动到页面顶部，当我使用时;

$('#tableId').on( 'page.dt', function () {
    $('html, body').animate({
        scrollTop: $('#tableId').offset().top
    }, 200);        
});

我被移到了桌子的顶部。

这在全球范围内运行良好，无需编写代码来定位站点/应用程序上的每个表。

// Scroll back to top of datatable when its pagination button is clicked to load/display next page
        $('.dataTables_wrapper').click(function(event) {
            var clickedElem = event.target;
            if ($(clickedElem).hasClass("paginate_button") || $(clickedElem).parents('.dataTables_paginate').length) {
                /* Not when the button is diabled */
                if (!$(clickedElem).hasClass("disabled") && !$(clickedElem).parents('.disabled').length) {
                    let divContainingTheDataTable = $(clickedElem).closest('.dataTables_wrapper');
                    $('html, body').animate({
                        scrollTop: $(divContainingTheDataTable).offset().top - 60
                    }, 200);
                }
            }
        });
相关文章：