Why incorrectly calculated pagination?

0
votes

I want to implement custom pagination in my Vue app, but it's calculated incorrectly

  1. page start from 0 pages but need from 1
  2. when going to the last page I can't return to the 1 page
  3. if I set items for example 5 per page and then go to the last page and then choose 100 items per page I didn't see any items and in info about pages showed like 2 of 1 page.

please help me with implementation pagination algorithm

            pageNumber: 0,
            pageSize: 50,
            pageSizeChoices: [
                5, 10, 20, 50, 100
            ],

        usersCount() {
            return this.isMappingsLoading ? 0 : this.resolvedUsers.length
        },
        pageCount() {
            return Math.ceil(this.usersCount / this.pageSize)
        },
        paginatedData(){
            const start = this.pageNumber * this.pageSize
            const end = start + this.pageSize
            return this.filteredUsers.slice(start, end)
        },
        isPrevPageDisabled() {
            return this.pageNumber <= 1
        },
        isNextPageDisabled() {
            return this.pageNumber === this.pageCount
        },
        pageInfo() {
            return `${this.pageNumber + 1} of ${this.pageCount}`
        }
        prevPage() {
            this.pageNumber = Math.max(this.pageNumber - 1, 1)
        },
        nextPage() {
            this.pageNumber = Math.min(this.pageNumber + 1, this.pageCount)
        }
                <div class="user-mgmt-info"
                     v-if="!isMappingsLoading && usersCount > 0">
                    <span>Rows per Page:</span>
                    <z-select
                        class="user-mgmt-info-rows"
                        v-model="pageSize"
                        :items="pageSizeChoices"
                    />
                    <v-icon
                        :disabled="isPrevPageDisabled"
                        @click="prevPage"
                        data-user-mgmt-prev-page
                    >
                        mdi-chevron-left
                    </v-icon>
                    <span class="user-mgmt-info-page-count">
                    {{ pageInfo }}
                </span>
                    <v-icon
                        :disabled="isNextPageDisabled"
                        @click="nextPage"
                        data-user-mgmt-next-page
                    >
                        mdi-chevron-right
                    </v-icon>
                </div>
1
javascriptalgorithmvue.jspaginationvuetify.js
Something that we do in our app is automatically go to page 1 when a user changes page size. Then you won't run into the on Page 2 of 1 issue. If your pageNumber starts at 0 then isPrevPageDisabled() { return this.pageNumber <= 1 }, doesn't look right. That should be this.pageNumber === 0 - tgreen
^ that doesn't solve my problem - kikosko

1 Answers

1
votes

Hi

Problem 1

you can easily make the pageNumber start from 1.

Solution

Just change the paginatedData() function so that it stars slicing from 0. 

        paginatedData(){
            const start = (this.pageNumber - 1) * this.pageSize // --> here
            const end = start + this.pageSize
            return this.filteredUsers.slice(start, end)
        },

and set pageNumber: 1,

Problem 2

Problem 2 will most probably solve itself once 1 and 3 are corrected.

Problem 3

As @tgreen suggested you should set this.pageNumber = 1 when user changes pagesize. Otherwise
if you are at page 5 and user changes pagesize, according to above code pageNumber is unchanged and you can easily see that paginatedData() will return 0. Thus explaining no items seen.

Solution

set this.pageNumber = 1 when user changes pageSize Also change isNextPageDisabled() to this

    isPrevPageDisabled() {
        return this.pageNumber == 1
    },