Vue 컴퍼넌트(Component) - 페이징 처리

제가 현업에서 구현했던 페이지 처리 기능을 공유하려합니다. 

페이징처리를 하는 Vue 컴퍼넌트를 구현하여 여러 화면에서 손쉽게 사용할 수 있습니다. 

다른 화면에서 파라미터를 넘겨서 페이징 컴퍼넌트를 손쉽게 호출하는 기능을 살펴보겠습니다!!!

페이징 처리 예시 이미지

처음 페이지, 이전 페이지, 다음 페이지, 마지막 페이지 버튼을 넣어 만들었습니다.

쿼리는 OFFSET #{currentIndex} LIMIT #{rowCount} 형식으로 구현했으며 #{rowCount}는 화면에 보여질 개수를 변수로 넘겨주면 되겠습니다.  #{currentIndex}는 현재 페이지까지의 데이터 수를 받는 변수이며 뒤에서 좀 더 자세히 설명하겠습니다.

 

1. Vue 컴퍼넌트 구현 코드(js)

Vue.component("pager-component", {
    template:'\
        <div class="col-xs-12 paging">\
        	<p class="prev">\
            	<a @click="goFirstPage"><span class="fa fa-backward"></span></a>\
            	<a @click="goPrevPage"><span class="fa fa-caret-left"></span></a>\
       		</p>\
          	<p class="listing">\
            	<span v-text="getCurrentPage"></span> / <span v-text="getEndPage"></span>\
        	</p>\
        	<p class="next">\
            	<a @click="goNextPage"><span class="fa fa-caret-right"></span></a>\
            	<a @click="goLastPage"><span class="fa fa-forward"></span></a>\
        	</p>\
        </div>\
        \
        ',
    props: {
        pageParam: {
            type: Object,
            default: function() {
                return {
                    currentPage: 1,	// 현재 페이지 초기값
                    rowCount: 10,	// 화면에 보여질 개수 초기값 10개 설정
                    totalCount: 0	// 총 데이터 개수 초기값
                }
            }
        }
    },
    data: function() {
        return {
            getCurrentPage: this.pageParam.currentPage,	// 현재 페이지
            getRowCount: this.pageParam.rowCount,	// 화면에 보여질 개수
            getTotalCount: this.pageParam.totalCount,	// 총 데이터 수
            getEndPage: 1	// 마지막 페이지
        }
    },
    watch: {
        'pageParam.currentPage': function(newVal, oldVal) {
            this.getCurrentPage = this.pageParam.currentPage;
        },
        'pageParam.rowCount': function(newVal, oldVal) {
            this.getRowCount = this.pageParam.rowCount;
            this.setEndPage(this.getRowCount,this.getTotalCount);
        },
        'pageParam.totalCount': {
        	this.getTotalCount = this.pageParam.totalCount;
        	this.setEndPage(this.getRowCount,this.getTotalCount);
        }
    },
    computed: {
    },
    methods: {
        setResultData: function(pCurrentPage, pRowCount) {
        	// 현재 페이지까지의 데이터 수를 계산, 쿼리의 #{currentIndex}에 넣어줄 값입니다.
            var currentIndex = (pCurrentPage - 1) * pRowCount;
            return {
                currentPage: pCurrentPage
                ,rowCount: pRowCount
                ,currentIndex: currentIndex
                ,totalCount: this.getTotalCount
                ,endPage: this.getEndPage
            };
        },
        goFirstPage: function() {	// 처음 페이지로
            this.getCurrentPage = 1;
            this.$emit("page-callback", this.setResultData(this.getCurrentPage,this.getRowCount));
        },
        goPrevPage: function() {	// 이전 페이지로
            if(this.getCurrentPage > 1) {
                this.getCurrentPage -= 1;
                this.$emit("page-callback", this.setResultData(this.getCurrentPage,this.getRowCount));
            }
        },
        goNextPage: function() {	// 다음 페이지로
            if(this.getCurrentPage < this.getEndPage) {
                this.getCurrentPage += 1;
                this.$emit("page-callback", this.setResultData(this.getCurrentPage,this.getRowCount));
            }
        },
        goLastPage: function() {	// 마지막 페이지로
            this.getCurrentPage = this.getEndPage;
            this.$emit("page-callback", this.setResultData(this.getCurrentPage,this.getRowCount));
        },
        setEndPage: function(rowCount, totalCount) {	// 마지막 페이지 계산
            this.getEndPage = Math.ceil(totalCount/rowCount);
            if(this.getEndPage == 0) {
                this.getEndPage = 1;
            }
        }
    },
    created: function() {
    },
    mounted: function() {
    }
});

props는 파라미터로 받을 값들을 선언했습니다. (pageParam.currentPage, pageParam.rowCount, pageParam.totalCount)

현재 보여질 데이터의 개수가 고정이라면 rowCount변수를 넘겨줄 필요없으며, pageParam.rowCount의 초기값만 설정해주시면 됩니다.

data 구문에 선언된 변수들을 컨포넌트 내부에서만 쓰이는 변수입니다. 또한 다른 화면에서 파라미터로 받은 값들을 세팅합니다.

 

 

2. 호출할 화면의 html

<html>
<head>
	<meta charset="UTF-8">
    	<title></title>
</head>
<body>
...
<div>
<pager-component
    v-bind:page-param="{currentPage: pCurrentPage,rowCount: pRowCount,totalCount: pTotalCount}" 
    @page-callback="pageCallback">
    </pager-component>
</div>
...
</body>
</html>

페이징을 넣은 곳에 위와 같이 Vue 컴퍼넌트를 호출하면 됩니다. 컴퍼넌트 호출은 js에서 선언한 컴퍼넌트 명인 <pager-component></pager-component>를 호출하시면 됩니다. 

컴퍼넌트를 호출할 때 꼭 파라미터를 넘겨야하며 파라미터는 다음과 같습니다.

pCurrentPage : 해당 화면의 현재 페이지

pRowCount : 해당 화면에 보여질 데이터 수 (해당 파라미터 값을 필수값이 아니며, 파라미터를 넘기지 않으면 컴퍼넌트js에서 선언한 10의 값이 적용됩니다.)

pTotalCount : 해당 화면의 총 데이터 수

 

그리고 가장 중요한 부분이 @page-callback="pageCallback" 입니다. 

페이징 컴퍼넌트를 로드한 화면의 js에서 pageCallback 함수를 선언해야합니다.

pageCallback 함수의 result 인자는 페이징 컴퍼넌트js의 this.$emit("page-callback",...)으로 전달한 결과값들 입니다.

페이징 컴퍼넌트js의 setResultData 함수를 참고하고 pageCallBack함수에 console.log(result)를 해보시면 결과값을 파악할 수 있을 것입니다.

pageCallback: function (result) {
  if(result!=null && typeof result=='object') {
    this.pCurrentPage = result.currentPage;
    this.pRowCount = result.rowCount;
    this.pCurrentIndex = result.currentIndex;
    
    this.searchList(false);		// 현재 화면에서 다시 리스트를 조회하는 함수(예시)
  }
}

위와 같이 페이징 컴퍼넌트의 결과값을 해당 페이지에서 사용하는 파라미터로 다시 저장해야합니다.

this.pCurrentPage, this.pRowCount, this.pCurrentIndex 파라미터를 사용해서 다시 리스트를 조회하면 정상적으로 페이지가 이동됩니다. 가장 처음에 언급한 OFFSET #{currentIndex} LIMIT #{rowCount} 쿼리에서 #{currentIndex}에 this.pCurrentPage 변수를, #{rowCount}에 this.pRowCount 변수가 넣어주시면 됩니다. 

또한 해당 페이지에서 변경된 this.pCurrentPage, this.pRowCount, this.pCurrentIndex는 페이징 컴퍼넌트js의 watch 구문을 통해서 페이징 컴퍼넌트 내부의 변수들이 자동으로 계산됩니다. 

 

이상 페이징 컴퍼넌트 구현이었습니다!!!!