CODEWITHSUNDEEP
javascriptjquerytabulator
Jake Zeitz
Jake Zeitz

Reputation: 2574

stop tabulator ajax calls from scrolling window to top of page

I have the tabulator plugin set up and working with my data. Currently, using the remote pagination feature but whenever the pagination buttons are clicked it loads the data and then scrolls to the top of the page. The pagination buttons do not contain href="#" so it shouldn't be trying to load a browser state.

The really odd thing is it is doing this behavior on any ajax call I make relative to tabulator. I used the setData function to load updated data and it scrolled to the top of the page again.

Here's a very simplified version of my code:

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

I don't think I'm doing anything bizarre here but each time the table data gets updated via ajax in anyway (page change, data change, filter change, etc.) it scrolls to the top of the page.

Upvotes: 1

Views: 1725

Answers (2)

Oli Folkerd
Oli Folkerd

Reputation: 8368

The replaceData function can be used to set data in the table without changing the scroll position:

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

Upvotes: 0

jarb99
jarb99

Reputation: 31

Here is solution for various scroll to top related issues. It involves extending the tabulator.js with two functions:

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;

}

Then get and set like this:

let pos = table.getVerticalScroll();

// do table management e.g. setColumns

table.setVerticalScroll(pos);

Upvotes: 1

Related Questions