javascript - 停止从滚动窗口到页面顶部的制表符 ajax 调用

Question

我设置了制表器插件并使用我的数据。目前，使用远程分页功能，但只要点击分页按钮，它就会加载数据，然后滚动到页面顶部。分页按钮不包含href="#"因此它不应该尝试加载浏览器状态。

真正奇怪的是，它在我相对于制表符进行的任何 ajax 调用中都执行此行为。我使用 setData 函数加载更新的数据，它再次滚动到页面顶部。

这是我的代码的一个非常简化的版本：

<div id="#tabulator"></div>

<script>
    $("#tabulator").tabulator({
        movableColumns: true,
        layout: "fitColumns",
        pagination: "remote",
        paginationSize: 10,
        ajaxURL: "rosterusers_tabulator_data-json.cfm",
        ajaxParams: {/* url params here */},
        columns: [/* columns set here*/]
    });

    /*then I have a modal dialog update event which calls the following*/
    $("#tabulator").tabulator(
        "setData",
        "rosterusers_tabulator_data-json.cfm", 
        {/*url params here*/}
    );
</script>

我不认为我在这里做任何奇怪的事情，但是每次通过 ajax 更新表格数据（页面更改、数据更改、过滤器更改等）时，它都会滚动到页面顶部。

Answer 1

这是各种滚动到最相关问题的解决方案。它涉及使用两个功能扩展 tabulator.js：

Tabulator.prototype.getVerticalScroll = function () {

    var rowHolder = this.rowManager.getElement();

    var scrollTop = rowHolder.scrollTop;

    return scrollTop;

}

Tabulator.prototype.setVerticalScroll = function (top) {

    var rowHolder = this.rowManager.getElement();

    rowHolder.scrollTop = top;

}

然后像这样获取和设置：

let pos = table.getVerticalScroll();

// do table management e.g. setColumns

table.setVerticalScroll(pos);

Answer 2

该replaceData函数可用于在不改变滚动位置的情况下设置表格中的数据：

$("#example-table").tabulator("replaceData", "rosterusers_tabulator_data-json.cfm")