[Vue.js] Vuetable pagination 적용

 

Sonarqube API 기능 분석을 위해 테스트 화면을 개발을 했다. 주어진 시간은 이틀..! 

간단한 조회성 기능 테스트 화면이라 따로 화면 개발 안하고, 3차 과제 프로젝트에 테스트 화면을 개발했다.

 

Vuetable 적용 방법은 아래 포스팅을 참고

[Vue.js] vuetable-2 적용

 

Vuetable-2 pagination 적용

1. vuateble 컴포넌트에 @vuetabe:pagination-data ~ 옵션 추가

 <vuetable
    ...
    @vuetable:pagination-data="onPaginationData"
  >
  </vuetable>

2. vuetable-pagination 영역 설정 

 <vuetable-pagination
        ref="pagination"
        :css="css.pagination"
        @vuetable-pagination:change-page="onChangePage"
      >
  </vuetable-pagination>

3. VuetablePagination 컴포넌트 import

import VuetablePagination from "../../components/VuetablePagination.vue";

 

components: { Vuetable, VuetablePagination }

4. onPaginationData 메서드  

// 화면 로딩 시, 페이징 처리 데이터를 세팅하는 메소드
onPaginationData(obj) {

  // vuetable-pagination에서 필요하는 데이터 형식에 맞게 가공
  let paginationData = {
    total: obj.total,
    per_page: obj.ps,
    current_page: obj.p,
    last_page: Math.ceil(obj.total / obj.ps) || 0,
    next_page_url: "/",
    prev_page_url: "/",
    from: 1,
    to: 100,
  };

  this.$refs.pagination.setPaginationData(paginationData);
  
}

5. onChangePage 메서드 

 onChangePage(page) {
  this.$refs.vuetable.changePage(page);
}

6. 페이징바 생성 

페이징바는 생성되었는데 클릭해도 페이지 이동이 안된다면?

API endpoint에 아래 내용을 추가해야한다. 

// when the user click something that causes the page to change,
// call "changePage" method in Vuetable, so that that page will be
// requested from the API endpoint.

7. API endpoint 

obj.put("current_page",page); // 현재 페이지
obj.put("per_page", 100); // 페이지 몇 개씩 보여줄건지 
obj.put("last_page",obj.get("total")); // total_count등 response 데이터 key값에 따라 상이함

해당 데이터가 없으면 Vuetable.vue 내부의 gotoPage메서드의 조건식이 false이기 때문에 페이지 이동이 안된다. 

gotoPage (page) {
      if (page != this.currentPage && (page >= this.firstPage && page <= this.tablePagination.last_page)) {
        this.currentPage = page
        this.loadData()
      }
    },

page <= this.tablePagination.last_page 여기서 에러 발생함

 

샘플 코드

public JSONObject getAllRules(String page) {

        JSONObject obj = null;

        String reqPage = "";
        if("".equals(page) || page == null){
            reqPage = "1";
        }else{
            reqPage = page;
        }

        obj = webClient.get().uri("/api/rules/search"+"?p="+reqPage)
                .header(HttpHeaders.AUTHORIZATION, AdminAuth.SONAR_BASIC_BASE_64.getKey())
                .retrieve()
                .bodyToMono(JSONObject.class)
                .block();

		// 페이징바 클릭 시 페이지 이동을 위해 아래 내용 추가
        obj.put("current_page",page);
        obj.put("per_page", 100);
        obj.put("last_page",obj.get("total"));

        return obj;
  }

---

💭 Vuetable pagination은 3차 과제 때 했었다. 페이징바까지는 금방 만들었는데, 페이징바를 아무리 클릭해도 다음 페이지로 넘어가지 않았다. 브레이크 포인트를 걸어서 원인을 찾았다 ^^.. 3차 과제 당시에도 똑같은 문제로 삽질을 했던 터라 이번 기회에 정리했다. 

 

onPaginationData : 페이징바만 만들어 줌 

onChangePage : 페이징바 클릭 시 다음 페이지로 이동

 

---

공식 문서 

https://www.vuetable.com/guide/pagination.html

Pagination | Vuetable-2