Vue-tables-2: Maintain Pagination When Clicking Back From Link

[seivad]

• Vue.js version: 2.6.10
• consumed using: Webpack via Laravel Mix

How do I preserve the pagination state when I click a link on the table to a new view then click back in the browser? Vue Tables 2 always goes back to page 1 when I click back.

I have Vue.use(ServerTable, {preserveState: true}) set when init the plugin and I am using Vue Router with history set to true.

[seivad]

Okay so I ended up doing the following to work successfully with Laravel pagination and Vue-Tables-2.

created () {
            var url = new URL(window.location.href)
            var pageNumber = url.searchParams.get("page")
            if(!!pageNumber) {
                this.options = {...this.options, initialPage: pageNumber}
            }
}

and then

methods: {
           paginationChanged() {
                console.log("Pagination did change...")
                var url = new URL(window.location.href)
                url.searchParams.set("page", this.$refs.quotesTable.Page)
                window.history.replaceState({}, null, url.href)
                this.options = {...this.options, initialPage: this.$refs.quotesTable.Page}
            },
        }
}

data () {
const vm = this

            return {
                        columns: [],
                        options: {}
            }
}

and the top of the server template

<v-server-table ref="quotesTable" :columns="columns" :options="options" @pagination="paginationChanged">

Hope this helps anyone else using Laravel and this plugin.

[matfish2]

Pagination should be preserved when using preserveState: true, I will look into it

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.