VueJs how to make pagination with limiter and range..?

Answer 1

Check out this code:

https://jsfiddle.net/os7hp1cy/48/

html:

<ul>
    <li v-for="pageNumber in totalPages" 
        v-if="Math.abs(pageNumber - currentPage) < 3 || pageNumber == totalPages - 1 || pageNumber == 0">
    <a href="#" @click="setPage(pageNumber)"  
       :class="{current: currentPage === pageNumber, last: (pageNumber == totalPages - 1 && Math.abs(pageNumber - currentPage) > 3), first:(pageNumber == 0 && Math.abs(pageNumber - currentPage) > 3)}">
       {{ pageNumber+1 }}</a>
    </li>
</ul>

css:

a.first::after {
  content:'...'
}

a.last::before {
  content:'...'
}

Basically, it only shows pagination that is within 2 pages of the current page. Then it will also show page 1 and the last page, and will put "..." before or after the number with CSS. So if you are on page 10, it will show:

1... 8 9 10 11 12 ...21

Answer 2

I've forked @Jeff's code and make a working version for Vue 2 due to this filter migration https://vuejs.org/v2/guide/migration.html#Filters-Outside-Text-Interpolations-removed.

paginate method is moved to computed:

paginate: function() {
        if (!this.users || this.users.length != this.users.length) {
            return
        }
        this.resultCount = this.users.length
        if (this.currentPage >= this.totalPages) {
          this.currentPage = this.totalPages
        }
        var index = this.currentPage * this.itemsPerPage - this.itemsPerPage
        return this.users.slice(index, index + this.itemsPerPage)
    }

WARNING: I didn't apply the text filter, just the pagination first.

https://jsfiddle.net/c1ghkw2p/