Почему неправильно рассчитана нумерация страниц? - PullRequest
Новая
       9

Почему неправильно рассчитана нумерация страниц?

0 голосов
/ 02 апреля 2020

Я хочу реализовать пользовательское разбиение на страницы в моем приложении Vue, но оно рассчитывается неправильно

  1. страница начинается с 0 страниц, но при переходе на последнюю страницу требуется 1
  2. Я не могу вернуться на 1 страницу
  3. , если я установил элементы, например, 5 на страницу, а затем go на последнюю страницу, а затем выбрал 100 элементов на страницу, я не видел ни одной позиции и информации о страницах, показанных как 2 из 1 страницы.

, пожалуйста, помогите мне с реализацией алгоритма разбиения на страницы 

            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 Ответ

1 голос
/ 02 апреля 2020

Привет

Задача 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

Проблема 2, скорее всего, решится сама собой, как только 1 и 3 будут исправлены.

Проблема 3

Как подсказал @tgreen, вы должны установить this.pageNumber = 1, когда пользователь изменит размер страницы. В противном случае если вы находитесь на странице 5, и пользователь изменяет размер страницы, то, согласно приведенному выше коду, pageNumber не изменяется, и вы легко можете увидеть, что paginatedData() вернет 0. Таким образом, объясняя, что ничего не видно.

Решение

установить this.pageNumber = 1 при изменении пользователем pageSize Также изменить isNextPageDisabled() на этот 

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