[vue.js] 페이지네이션 (pagination) 구현하기

HoneyPot 프로젝트에서 구독목록 리스트를 보여줘야 하는 과정이 있었는데 처음으로 해본 페이지네이션 구현하기를 남겨보려고 한다. 우선 완성본 근데 이제 미완성을 곁들인 .. 

 

 

[HTML 코드]

<template lang="">

        <div class="card-container" v-if="list != null && list.length > 0">
                <div v-for="order in displayedList" :key="order.groupNum">
                 //여기에는 카드에 들어갈 내용들을 작성
            </div>      
        </div>

//pagination 버튼 생성 
            <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1"><span>이전</span></button>
      <span style="margin: 5px 1% 1% 1%; font-size: 16px;">{{ currentPage }}</span>
      <button @click="nextPage" :disabled="currentPage * pageSize >= list.length"><span>다음</span></button>
    </div>
    
</template>

 

[script 코드]

<script>
import dayjs from 'dayjs'
export default {
    name: 'MyPartyList',
    data() {
        return {
            list: [],
            currentPage: 1, // 현재 페이지
            pageSize: 3, // 페이지당 표시할 카드 수

        }
    },
    created: function () {
    //필요한 부분 불러오기 
    },
    
    computed: {
        // 현재 페이지에 표시할 카드 목록을 계산
        displayedList() {
            const startIndex = (this.currentPage - 1) * this.pageSize;
            const endIndex = startIndex + this.pageSize;
            return this.list.slice(startIndex, endIndex);
        }
    },
    methods: {
        prevPage() {
            if (this.currentPage > 1) {
                this.currentPage--;
            }
        },
        nextPage() {
            const lastPage = Math.ceil(this.list.length / this.pageSize);
            if (this.currentPage < lastPage) {
                this.currentPage++;
            }
        },
    }
}
</script>

 

1. 우선 data의 return 에 현재 페이지 수와 페이지 당 보여줄 카드 개수를 적어 준다. 

 

2. computed에 현재 페이지에 표시할 카드 목록을 추출할 계산 된 속성을 입력 해준다.
startIndex 변수에는 현재 페이지의 첫 번째 카드의 인덱스를 계산하고,
endIndex 변수에는 현재 페이지의 마지막 카드 다음 카드의 인덱스를 계산한다. 즉, startIndex 변수는 list의 0 번을 가지고 있고 endIndex 변수는 3번을 가지고 있다. 이제 list.slice 를 사용하여 카드들을 추출하고 새로운 배열로 반환한다. 

list.slice(start, end)는 배열(list)에서 특정 범위의 요소를 추출하여 새로운 배열을 생성하는 JavaScript 배열 메서드이다. 이 메서드는 start 인덱스와 end 인덱스 사이의 요소를 찾는데 사용 되지만 end 인덱스는 포함하지 않는 특징이 있다. 즉, const arr = [1, 2, 3, 4, 5]; 이러한 배열에서 const result = arr.slice(1, 4); 이걸 실행 한다면 결과 값으로 2,3,4 가 반환 된다. 

 

3. 이전과 다음으로 넘길 버튼의 속성을 정의 해준다.
prevPage 는 현재 페이지가 1보다 큰 경우에만 이전 페이지로 이동할 수 있게 검사를 하고 currentPage를 1만큼 감소 시킨다.
nextPage는 lastPage 변수를 계산하여 마지막 페이지 번호를 구한다. 이때 list의 크기를 생각해서 올림값으로 구해 주는게 포인트이다. 그리고 currentPage가 lastPage 보다 작은 경우에만 다음페이지로 이동 할 수 있도록 검사하고 currentPage를 1만큼 증가 시킨다.