Customizing the visible vuetify pagination buttons

Question

I'm using the vuetify pagination and the code looks something like this:

<v-pagination
  v-model="page"
  :length="n"
  total-visible="7"
></v-pagination>

Where n is greater than 7, if you're on the first few pages, it'll show the first few pages and the last few pages. I don't want it to show the last few pages.

Also, say you're on page 14 of n, it'll show the first page, pages 13-15, and the nth page. I want it to show +/- some range of pages around page 14 (range of 2 would mean 12-16 are visible). At a min, I'd want to show just the next and previous buttons.

What it does:
< [ 1 ] [ 2 ] [ 3 ] ... [ n -2 ] [ n-1 ] [ n ] >
< [ 1 ] ... [ k-1 ] [ k ] [ k+1 ] ... [ n ] >

What I want:
< [ 1 ] [ 2 ] [ 3 ] [ 4 ] [ 5 ] ... >
< ... [ k-1 ] [ k ] [ k+1 ] ... >
~OR~
< >

Stucco Stucco · Accepted Answer · 2019-04-05T21:06:17

I added the following to the component and it "worked":

<style scoped>
  /deep/ .v-pagination__item{
    display: none;
  }
  /deep/ .v-pagination__more{
    display: none;
  }
</style>

...where "worked" means only the next/previous arrows are visible.

Customizing the visible vuetify pagination buttons

1 Answers