javascript - 为什么分页计算错误？

我想在我的Vue应用中实现自定义分页，但是计算不正确


页面从0页开始，但需要从1开始
转到最后一页时，我无法返回到第一页
如果我将项目设置为例如每页5个，然后转到最后一页，然后选择每页100个项目，那么我没有看到任何项目，并且在有关页面的信息中显示为1之2。


请帮我实现分页算法

            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

您可以轻松地将pageNumber从1开始。

解

只需更改paginatedData()函数，使其从0开始星形切片。

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

并设置pageNumber: 1,

问题2

一旦纠正了1和3，问题2很可能会解决。

问题3

如@tgreen所建议，当用户更改页面大小时，应设置this.pageNumber = 1。否则，如果您在第5页上，并且用户更改了页面大小，则根据上述代码pageNumber不变，您可以轻松地看到paginatedData()将返回0。因此，看不到任何内容。

解

当用户更改this.pageNumber = 1时设置pageSize
同时将isNextPageDisabled()更改为此

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