Pagination 페이지네이션

데이터를 페이지 단위로 나눠서 보여 주는 페이지네이션 컴포넌트예요.

출처: 문서

본문

언제 사용하나요

모든 데이터를 한 번에 불러오거나 렌더링하기에 시간이 오래 걸릴 때, 페이지 번호를 전환하면서 데이터를 훑어볼 수 있어요.

기본 사용법

:::demo

<template>
  <h5 style="padding: 20px 0 10px;">size = 'sm'</h5>
  <d-pagination
    size="sm"
    :total="pager.total"
    v-model:pageSize="pager.pageSize"
    v-model:pageIndex="pager.pageIndex"
    :can-view-total="true"
    :can-change-page-size="true"
    :can-jump-page="true"
    :max-items="5"
  />

  <h5 style="padding: 20px 0 10px;">size = 'md'</h5>
  <d-pagination
    :total="pager.total"
    v-model:pageSize="pager.pageSize"
    v-model:pageIndex="pager.pageIndex"
    :can-view-total="true"
    :can-change-page-size="true"
    :can-jump-page="true"
    :max-items="5"
  />

  <h5 style="padding: 20px 0 10px;">size = 'lg'</h5>
  <d-pagination
    size="lg"
    :total="pager.total"
    v-model:pageSize="pager.pageSize"
    v-model:pageIndex="pager.pageIndex"
    :can-view-total="true"
    :can-change-page-size="true"
    :can-jump-page="true"
    :max-items="5"
  />

  <h5 style="padding: 20px 0 10px;">Custom Style</h5>
  <d-pagination
    :total="pager.total"
    v-model:pageSize="pager.pageSize"
    v-model:pageIndex="pager.pageIndex"
    :can-view-total="true"
    :can-change-page-size="true"
    :can-jump-page="true"
    go-to-text="Jump to"
    :pre-link="preLink"
    :next-link="nextLink"
    :max-page="20"
  />
</template>
<script>
import { defineComponent, shallowReactive, h } from 'vue';

export default defineComponent({
  setup() {
    const pager = shallowReactive({
      total: 306,
      pageIndex: 5,
      pageSize: 10,
      pageSizeOptions: [10, 20, 30, 40, 50],
    });

    const preLink = '<span class="icon-arrow-left"></span>';
    const nextLink = '<span class="icon-arrow-right"></span>';

    return {
      pager,
      preLink,
      nextLink,
    };
  },
});
</script>

:::

미니멀 모드

미니멀 모드는 정보가 많은 페이지에 어울려요. 페이지의 복잡도를 줄여 주거든요. :::demo

<template>
  <h5 style="padding: 20px 0 10px;">Simple Mode</h5>
  <d-pagination
    :total="pager.total"
    v-model:pageSize="pager.pageSize"
    total-item-text="Total"
    v-model:pageIndex="pager.pageIndex"
    :can-view-total="true"
    :can-change-page-size="true"
    :lite="true"
  />

  <h5 style="padding: 20px 0 10px;">Super Simple Mode</h5>
  <d-pagination
    size="sm"
    :total="pager.total"
    v-model:pageSize="pager.pageSize"
    :show-page-selector="false"
    v-model:pageIndex="pager.pageIndex"
    :can-change-page-size="true"
    :lite="true"
  />

  <h5 style="padding: 20px 0 10px;">have-config-menu = "true"</h5>
  <d-pagination
    size="sm"
    :total="pager.total"
    v-model:pageSize="pager.pageSize"
    :show-page-selector="false"
    v-model:pageIndex="pager.pageIndex"
    :can-change-page-size="true"
    :lite="true"
    :have-config-menu="true"
  >
    <div class="pagination-config-item">
      <div class="config-item-title">show field</div>
      <div class="config-item-words">setting</div>
    </div>
    <div class="pagination-config-item">
      <div class="config-item-title">display method</div>
      <div style="padding-left: 8px; margin-top: 4px">
        <i class="icon-list-view"></i>
        <i class="icon-veIcon-briefcase"></i>
      </div>
    </div>
  </d-pagination>
</template>
<script>
import { defineComponent, shallowReactive } from 'vue';

export default defineComponent({
  setup() {
    const pager = shallowReactive({
      total: 306,
      pageIndex: 5,
      pageSize: 10,
      pageSizeOptions: [10, 20, 30, 40, 50],
    });

    return {
      pager,
    };
  },
});
</script>

<style lang="scss">
@import '@devui/theme/styles-var/devui-var.scss';

/* 配置中的每一项，自定义项建议应用此样式或在此基础上修改 */
.pagination-config-item {
  padding-bottom: 8px;
  padding-top: 4px;
  border-bottom: 1px solid $devui-line;
}

/* 配置中每一项的标题样式，自定义项建议应用此样式或在此基础上修改 */
.config-item-title {
  color: $devui-line;
  padding-left: 8px;
  font-size: $devui-font-size;
  line-height: 1.5;
}

.config-item-words {
  color: $devui-text;
  padding-left: 8px;
  font-size: $devui-font-size;
  margin-top: 4px;
}

.config-item-words:hover {
  background-color: $devui-area;
  cursor: pointer;
}
</style>

:::

다양한 설정

입력해서 이동하기, 이동 버튼 표시하기를 설정할 수 있고, pageSize 설정 같은 기능도 지원해요. :::demo

<template>
  <div style="padding: 20px 0 10px;"></div>
  <d-pagination
    size="sm"
    :total="pager.total"
    v-model:pageSize="pager.pageSize"
    v-model:pageIndex="pager.pageIndex"
    :max-items="10"
    :can-view-total="true"
    :can-jump-page="true"
    :can-change-page-size="true"
    @page-index-change="pageIndexChange"
    @page-size-change="pageSizeChange"
  />

  <div style="padding: 20px 0 10px;"></div>
  <d-pagination
    size="sm"
    :total="pager.total"
    v-model:pageSize="pager.pageSize"
    v-model:pageIndex="pager.pageIndex"
    :max-items="10"
    :can-view-total="true"
    :can-jump-page="true"
    :show-jump-button="true"
    @page-index-change="pageIndexChange"
    @page-size-change="pageSizeChange"
  />

  <div style="padding: 20px 0 10px;"></div>
  <d-pagination
    size="sm"
    :total="pager.total"
    v-model:pageSize="pager.pageSize"
    v-model:pageIndex="pager.pageIndex"
    :max-items="10"
    :can-view-total="true"
    :can-change-page-size="true"
    :can-jump-page="true"
    :auto-fix-page-index="false"
    :auto-hide="false"
    @page-index-change="pageIndexChangeWithoutFix"
    @page-size-change="pageSizeChangeWithoutFix"
    :page-size-options="pager.pageSizeOptions"
    :page-size-direction="['right']"
  />
</template>
<script>
import { defineComponent, shallowReactive } from 'vue';

export default defineComponent({
  setup() {
    const pager = shallowReactive({
      total: 306,
      pageIndex: 5,
      pageSize: 10,
      pageSizeOptions: [10, 20, 30, 40, 50],
    });

    const pageSizeChange = (val) => {
      pager.pageIndex = 1;
      console.log(val, 'pageSizeChange');
    };
    const pageIndexChange = (val) => {
      console.log(val, 'pageIndexChange');
    };

    const pageIndexChangeWithoutFix = (pageIndex) => {
      console.log(pageIndex, 'pageIndexChangeWithoutFix');
    };
    const pageSizeChangeWithoutFix = (pageSize) => {
      pager.pageIndex = 1;
      console.log(pageSize, 'pageSizeChangeWithoutFix');
    };

    return {
      pager,
      pageSizeChange,
      pageIndexChange,
      pageIndexChangeWithoutFix,
      pageSizeChangeWithoutFix,
    };
  },
});
</script>

:::

특수한 상황

특수한 상황에서 페이지네이션이 어떻게 표시되는지 살펴봐요. :::demo

<template>
  <h5 style="padding: 20px 0 10px;">
    When the value of <code>pageIndex</code> exceeds the maximum page number, enable <code>show-true-page-index</code> to display the value
    of <code>pageIndex</code>
  </h5>
  <d-pagination
    size="sm"
    :total="pager1.total"
    v-model:pageSize="pager1.pageSize"
    v-model:pageIndex="pager1.pageIndex"
    :max-items="5"
    :can-view-total="true"
    :can-change-page-size="true"
    :can-jump-page="true"
    :show-true-page-index="true"
  />

  <h5 style="padding: 20px 0 10px;">
    When the value of <code>pageIndex</code> exceeds the maximum page number, the <code>show-true-page-index</code> function is disabled and
    only the maximum page number is displayed.
  </h5>
  <d-pagination
    size="sm"
    :total="pager2.total"
    v-model:pageSize="pager2.pageSize"
    v-model:pageIndex="pager2.pageIndex"
    :can-view-total="true"
    :can-change-page-size="true"
    :can-jump-page="true"
    :max-items="5"
    :show-true-page-index="false"
  />

  <h5 style="padding: 20px 0 10px;">Default Mode</h5>
  <d-pagination
    size="sm"
    :total="defaultPager.total"
    v-model:pageSize="defaultPager.pageSize"
    v-model:pageIndex="defaultPager.pageIndex"
    :can-view-total="true"
    :can-change-page-size="true"
    :can-jump-page="true"
    :max-items="5"
  />
  <div style="display: flex; margin-top: 10px;">
    <d-button bsStyle="primary" circled="true" size="sm" @click="setTotal(0)" width="200">total = 0</d-button>
    <d-button bsStyle="common" circled="true" size="sm" @click="setTotal(5)" width="200">total = 5</d-button>
    <d-button bsStyle="common" circled="true" size="sm" @click="setTotal(15)" width="200">total = 15</d-button>
  </div>

  <h5 style="padding: 20px 0 10px;">Simple Mode</h5>
  <d-pagination
    :total="litePager.total"
    v-model:pageSize="litePager.pageSize"
    total-item-text="total"
    v-model:pageIndex="litePager.pageIndex"
    :can-view-total="true"
    :can-change-page-size="true"
    :lite="true"
  />
  <div style="display: flex; margin-top: 10px;">
    <d-button size="sm" @click="setLiteTotal(0)" width="200">total = 0</d-button>
    <d-button size="sm" @click="setLiteTotal(20)" width="200">total = 20</d-button>
    <d-button size="sm" @click="setLiteTotal(30000)" width="200">total = 30000</d-button>
    <d-button size="sm" @click="setLiteTotal(100000)" width="200">total = 100000</d-button>
    <d-button size="sm" @click="setIndex(2)" width="200">index = 2</d-button>
    <d-button size="sm" @click="setIndex(3)" width="200">index = 3</d-button>
  </div>
</template>
<script>
import { defineComponent, shallowReactive } from 'vue';

export default defineComponent({
  setup() {
    const pager1 = shallowReactive({
      total: 10,
      pageIndex: 3,
      pageSize: 10,
    });
    const pager2 = shallowReactive({
      total: 10,
      pageIndex: 3,
      pageSize: 10,
    });

    const defaultPager = shallowReactive({
      total: 0,
      pageIndex: 1,
      pageSize: 10,
    });
    const setTotal = (val) => {
      defaultPager.total = val;
    };

    const litePager = shallowReactive({
      total: 0,
      pageIndex: 1,
      pageSize: 10,
    });

    const setLiteTotal = (val) => {
      litePager.total = val;
    };
    const setIndex = (val) => {
      litePager.pageIndex = val;
    };

    return {
      pager1,
      pager2,
      defaultPager,
      setTotal,
      litePager,
      setLiteTotal,
      setIndex,
    };
  },
});
</script>

:::

Pagination 파라미터

Pagination 이벤트

Pagination 타입 정의

AppendToBodyDirection

type AppendToBodyDirection = 'rightDown' | 'rightUp' | 'leftUp' | 'leftDown' | 'centerDown' | 'centerUp';

PageSizeDirection

type PageSizeDirection = 'bottom' | 'top' | 'left' | 'right';

더 알아보기 (Learn more)

total, pageSize, pageIndex 값을 조합하면 다양한 모양의 페이지네이션을 만들 수 있어요. 자세한 옵션은 위 파라미터 표와 DevUI 공식 문서를 참고해 보세요.