0

我设置了制表器插件并使用我的数据。目前,使用远程分页功能,但只要点击分页按钮,它就会加载数据,然后滚动到页面顶部。分页按钮不包含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 更新表格数据(页面更改、数据更改、过滤器更改等)时,它都会滚动到页面顶部。

4

2 回答 2

0

这是各种滚动到最相关问题的解决方案。它涉及使用两个功能扩展 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);
于 2020-12-23T16:16:30.547 回答
0

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

$("#example-table").tabulator("replaceData", "rosterusers_tabulator_data-json.cfm") 
于 2018-09-24T20:48:54.010 回答