Vuetify: [Bug Report] When created Data Table component initial value of the pagination page is reset to 1

[isimonov]

Versions and Environment

Vuetify: 1.0.11
Vue: 2.5.16
Browsers: Chrome 65.0.3325.181
OS: Windows 10

Steps to reproduce

Manually set the value of the page in pagination object, other than 1.
...
data () {
return { ...
pagination: {
page: 2
}, ...
}} ...

Expected Behavior

Do not reset the manual value of the page in pagination object when creating a component Data Table.

Actual Behavior

When created Data Table component initial value of the pagination page is reset to 1, in spite of the fact that it can be specified by some other, for example, 2.

Reproduction Link

https://codepen.io/isimonov/pen/QmagPm

Other comments

In vuetify version 1.0.5 it works correctly. Since version 1.0.6 it does not work. The current version 1.0.11 also does not work correctly.

This functionality is extremely necessary if the page value and, for example, the filters are saved, when navigating between the pages on which this component is used.

[nekosaur]

Possibly related to https://github.com/vuetifyjs/vuetify/issues/3585

[downace]

Issue is still reproducible in 1.1.9: https://codepen.io/downace/pen/XBqoao?&editors=101

Is this a bug or there is a working (not documented) way to set initial page of the data table?

[isimonov]

I think this is a non-obvious bug that does not interest anyone very much.

[nekosaur]

The current workaround for this issue is to supply sortBy and descending properties in pagination object. That way resetPagination won't be triggered when first loading the table.

pagination: {
  page: 2,
  sortBy: 'calories',
  descending: false
}

[alexhermida]

Thanks for the tip @nekosaur I think it's needed to have 'resetPagination=false' or something similar. It's not easy to manage pagination with datatables component when you are using url for filtering and pagination.

[ggicci]

[email protected]

The behavior of resetting page to 1 is really annoying. Since we won't be able to initialize the page to a desired number according to URL parameters.

// URL: ?page=4

mounted () {
  this.pagination.page = parseInt(this.$route.query.page) || 1
},
watch: {
  'pagination': {
    handler: function () { this.queryAPI() }
  }
},
methods: {
  queryAPI () {
    console.log(`query api, page=${this.pagination.page}`)
  }
}

You will always see the similar output from the console:

query api, page=4
query api, page=1

[b4dnewz]

@ggicci i've the exact same issue.. did u find a way out?

The most simple server side pagination which should take care of query string (such as page, limit, sort) so the user can reload the page and retrieve the same extract data looks like impossible to do with data-table component

__Edit:__ the fix proposed by https://github.com/vuetifyjs/vuetify/issues/3687#issuecomment-410506345 it's enough to make it work

[ggicci]

@b4dnewz unfortunately I didn’t

[an1creator]

The current workaround for this issue is to supply sortBy and descending properties in pagination object. That way resetPagination won't be triggered when first loading the table.

pagination: {
  page: 2,
  sortBy: 'calories',
  descending: false
}

it doesn't work
vuetifyjs ver. 1.5.2

[b4dnewz]

@h00x00f you should have all the pagination object properties in your initial object otherwise when pagination is initialized it's merged with the default and the extra property added will trigger the event.

this is how I made it working in my code.

[an1creator]

@h00x00f you should have all the pagination object properties in your initial object otherwise when pagination is initialized it's merged with the default and the extra property added will trigger the event.

this is how I made it working in my code.

I work with server-side app and response contain all params

all params works good. but page all the time 1, during the time when server sends 2 with other params

[b4dnewz]

Are the returning items naturally ordered as your props? In particular descending: true
I don't know why your code is not working but I guess when the component is created it re-orders the element and after doing that reset the pagination properties (such as page)

[an1creator]

Are the returning items naturally ordered as your props? In particular descending: true
I don't know why your code is not working but I guess when the component is created it re-orders the element and after doing that reset the pagination properties (such as page)

Yes, something wrong in my code :)
If setup the properties of an object to static, that everything works fine.

thanks for help

[b4dnewz]

no worries, I'm glad to help and save you some debug time if possible.
I had this same problem few days ago.

[cimatt55]

Hi,

Setting default values for all pagination properties only seems to solve the problem when pagination.sortBy remains at its default value.

If default values are....

pagination: {
            descending: false,
            page: 1,
            rowsPerPage: 15,
            sortBy: "columnA",
            totalItems: 0
       }

I can set them on mount to a different page number and it works.

e.g. the page would load correctly if I set the details from default to...

pagination: {
            descending: false,
            page: 5,
            rowsPerPage: 15,
            sortBy: "columnA",
            totalItems: 0
        }

However, if I change both the page and sortBy then the page is reset to 1 again.

e.g. changing from the default to this on mount

pagination: {
            descending: false,
            page: 3,
            rowsPerPage: 15,
            sortBy: "columnB",
            totalItems: 0
        }

will cause the pagination to correctly fire as page 3, columnB but then immediately fire again setting the page number to 1. I haven't yet found a way around it.

It becomes important in history when user moves around the pages so we can maintain the state.

Any more thoughts on a possible work-around ?

thanks,

[nekosaur]

Fixed in 2.0. In 2.0 it's possible to set initial values using page, sortBy, sortDesc props

[ayZagen]

@nekosaur page is still overriden. Please reopen issue.
codepen modified from vuetify docs

[nekosaur]

there's an open issue