Question

我有问题。在使用datatables时，我想在页面更改时滚动表格顶部。

我已添加以下代码

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

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

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

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

Answer 1

我明白了，但我花了很多时间。问题出在我使用Bootstrapped版本的时候：

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

工作正常。

所以最后我注意到我可以像这样包含它（datatables和bootstrap插件在不同的文件中）：

<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);        
});

我被移到了桌面上。

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

1 个答案: