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更新表数据（页面更改，数据更改，过滤器更改等）时，它都会滚动到页面顶部。< / p>

Answer 1

replaceData 功能可用于在表格中设置数据，而无需更改滚动位置

$（“＃example-table”）。tabulator（“ replaceData”，“ rosterusers_tabulator_data-json.cfm”）

Answer 2

这里是各种滚动到顶部相关问题的解决方案。它涉及使用两个函数扩展 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);

停止制表机ajax调用从滚动窗口到页面顶部

2 个答案: