Vue.js로 List를 이용한 CRUD, Pagination, Search - #2 Pagination 기능 추가

이번 포스팅에서는 앞서 구현한 간단한 ListView에 Pagination기능을 추가해보도록 하겠습니다.

먼저 ListSample 컴포넌트의 추가된 template code는 다음과 같습니다.

<template> code

<template>
  <v-app id="list-sample">
    <v-flex sm6 offset-sm3>
      <v-list two-line
              v-for="(listItem, index) in calData"
              :key="index">
        <v-list-tile>
          <v-list-tile-content>
            <v-list-tile-title class="text--primary">
              {{ listItem.subject }}
            </v-list-tile-title>
            <v-list-tile-sub-title>
              {{ listItem.desc }}
            </v-list-tile-sub-title>
          </v-list-tile-content>
 
          <v-list-tile-action>
            <v-icon ripple
                    @click="">
              edit
            </v-icon>
            <v-icon ripple
                    @click="">
              delete
            </v-icon>
          </v-list-tile-action>
        </v-list-tile>
        <v-divider></v-divider>
      </v-list>
      <br/>
      <v-pagination
        v-model="curPageNum"
        :length="numOfPages">
      </v-pagination>
  </v-app>
</template>

추가/변경된 코드는 5행 for문으로 탐색하는 Data가 calData로 바뀌었고 하단 31행부터 마찬가지로 Vuetify 컴포넌트인 <v-pagination> 디렉티브가 추가되었습니다. 

Vuetify 컴포넌트들의 상세한 API는 Vuetify 문서를 참조부탁드립니다.(아주 잘나와있어요!!)

<v-pagination>의 속성 중

v-model : 현재 활성화(보여지고있는)되어있는 Page의 번호.

:length : v-bind:length의 약어로 length 속성은 총 page의 사이즈를 나타냅니다.

<script> code

export default {
    data() {
      return {
        listData: [],
        dataPerPage: 10,
        curPageNum: 1,
      }
    },
    created() {
      this.axios.get('http://localhost:8080/server/listTest.json')
        .then((response) => {
          this.listData = response.data;
        });
    },
    computed: {
      startOffset() {
        return ((this.curPageNum - 1) * this.dataPerPage);
      },
      endOffset() {
        return (this.startOffset + this.dataPerPage);
   
      numOfPages() {
        return Math.ceil(this.listData.length / this.dataPerPage);
      },
      calData() {
        return this.listData.slice(this.startOffset, this.endOffset)
      }
    }
  }
</script>

추가된 코드는 data 속성의 

dataPerPage는 한 page당 보여지는 list의 갯수입니다.

curPageNum은 현재 UI에 보여지고 있는 page의 숫자입니다.

그리고 computed 속성의 4개의 함수가 추가되었습니다.

data의 추가된 값의 따라 각각의 계산된 로직을 수행한 값을 return 하고 있습니다.

그 중 calData는 보여지고 있는 page의 숫자와 page당 보여질 data의 갯수에 따라서 계산된 startOffset과 endOffset을 이용해

slice하여 return 하고 있습니다. 

이렇게 Pagination 기능을 추가하였습니다.

Pagination을 구현할 때에는 만약 보여줄 데이터가 아주 많은 경우라면 각 page가 변경 될 때마다 서버와 통신하여 받아온 데이터를 찍어줘야 하는 경우가 필요 할 수도 있습니다. 

하지만 현재 포스팅에서는 모든 데이터를 한번에 받아온 후 각 page를 호출 할 때 마다 잘라서 보여주고 있습니다.