[Feature Request] VDataTable automatically return to first page

[Teellcory]

Problem to solve

If you have a table with dynamic content (e.g. 200 rows) and have pagination set to 50 and go to page 3. Then do something externally to change the number of rows down to 20, the table will stay at the position of "150-20 of 20"

Proposed solution

If the table detects that the current position is beyond the total number of pages, it returns to page 1.

[manonthemat]

A user of Yomi.ai noticed and documented the same behavior here.

Using Vuetify 2.2.27.

[mwgamble]

I think it's generally ideal for any kind of filtering action (including removal of filters) to reset pagination.

[bmsoftware2020]

I facing this problem and never find the solution to fix.

[stianl]

Here's my take on it - codepen based on example from Server-side paginate and sort. I've changed the items per page to 5 so there is pagination.

I've added a search property that is watched (in addition to options). In the handler I reset the page count. If I you don't do this and search for "f" on page 2 - Frozen Yogurt will not show up.

[bencun]

I can confirm this issue. If I go forward two pages, perform search, get the response and update the table data I get something like this in the footer: 21-1 of 1 The page navigation still allows me to go back to the first page.

I do update the server-items-length to the new search results' array length and page to 1 but this still doesn't help.

It's server side pagination, obviously.

[simonmaass]

I just encountered the same problem.... any solutions yet?

[shaunthambyah]

@stianl's code is an excellent example (and probably should have a reference in the docs). I think the key here is to set whatever variable you are using as the page sync, whether its via individual props or options before making the call to your API.

[adamjimenez]

I have a similar issue. See demo.

Go to page 2. The button sets page to 1, but it doesn't react.

[simkuns]

Setting :search to empty string as initial value triggers @update:options which always emits { page: 1, ... }

https://play.vuetifyjs.com/#eNrdkr9uhDAMxl/FykIr8efonTogrlI79AU6HjekYGgkSKIksCDevQmBQq9Lx6pTbH8/R/4sX0aiVZk8SxkPPZKM5AY72VKDTwUHyIeISjmHc1IKbijjqJbSXKyooZGh7y1GGtWAatUAMma/0+eCzG9BbpWoRd6YDwukh8M3WdIGbVlIwwTXsUv3+hB1osI2W/SN3KBkHTv5OfdftKKRqtL1++DNKMabf2PnN0ZcxZ9bnuzO0Ka6VEwa0Gh6f42sk0IZGEFhDRPUSnQQ2AsOHA5g/9UO3xYJZ4feBcH9rb4oPa+wtqNUO2DxuBCjn9sZzuAUumyy8IbPi7PwxYMjsCqDNAROO9sRvAoRwDT3reLDl/hC1SpenX/v2HolU0iO8TFOU+KCU/xIrp+YwCO2