[VueJS] 게시판 페이징 구현

ㅁ 실행코드

- 게시판 페이징을 위한 화면 구성

<div class="card-wrapper p-0">
        <div class="card" style="heigth: 90%;">
          <div class="table-wrapper overflow-auto flex-fill">
            <table class="w-100" style="text-align: center;">
              <thead>
                <tr>
                  <th>
                    이름
                  </th>
                  <th>
                    나이
                  </th>
                  <th class="d-none d-xl-flex" />
                </tr>
              </thead>
              <tbody>
                <template v-for="a in paginatedData">
                  <tr v-for="b in a">
                    <td>
                      {{ b.name }}
                    </td>
                    <td>
                      {{ b.age }}
                    </td>
                  </tr>
                </template>
              </tbody>
            </table>
          </div>

          <div class="pagination d-flex justify-content-center align-items-center">
            <button :disabled="pageNum === 0" class="btn next" @click="prevPage()">
              <span class="material-icons-outlined">
                chevron_left
              </span>
            </button>
            <span>{{ pageNum + 1 }} / {{ pageCount===0? 1: pageCount }}</span>
            <button :disabled="pageNum >= pageCount - 1" class="btn next" @click="nextPage()">
              <span class="material-icons-outlined">
                chevron_right
              </span>
            </button>
          </div>
        </div>
      </div>

 * a의 값

 [ { "name": "a", "age": 13 } ]

 [ { "name": "b", "age": 14 } ]

 [ { "name": "c", "age": 15 } ]

 [ { "name": "d", "age": 16 } ]

 [ { "name": "e", "age": 17 } ]

 [ { "name": "f", "age": 18 } ]

 => 따라서 원하는 name과 age 값을 얻기 위해서는 for 문을 한번 더 돌려줘야 함

 

- 게시판 페이징  기능을 실행하기위한 vuejs 코드

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  data(vm: any): any {
    return {
      pageNum: 0,
      listArray: [[{ name: 'a', age: 13 }], [{ name: 'b', age: 14 }], [{ name: 'c', age: 15 }], [{ name: 'd', age: 16 }], [{ name: 'e', age: 17 }], [{ name: 'f', age: 18 }]],
      pageSize: 5,

    };
  },

  computed: {
    pageCount() {
      const listLeng = this.listArray.length;
      const listSize = this.pageSize;
      let page = Math.floor(listLeng / listSize);
      if (listLeng % listSize > 0) page += 1;

      return page;
    },

    paginatedData() :any {
      const start = this.pageNum * this.pageSize;
      const end = start + this.pageSize;
      return this.listArray.slice(start, end);
    },

  },

  methods: {
    nextPage() {
      this.pageNum += 1;
    },
    prevPage() {
      this.pageNum -= 1;
    },

  },
});
</script>

* 데이터베이스를 통해 값을 들고 오고 싶다면 listArray 배열에 들고 온 값을 넣어주면 됨

* pageSize는 한 페이지에 몇 개의 데이터를 넣을지 정해줌

  pageSize=5 일 때 한 페이지당 데이터는 5개씩 출력됨

* pageCount는 총 몇 페이지인지 저장하는 변수임

* listArray 배열이 들고 온 모든 데이터라면 paginatedData는페이지당 보여줄 데이터를 저장함

   

 

ㅁ 실행결과