nv-pagination

bootpag 기반 페이지네이션(Pagination) 기능 구현 컴포넌트. 페이지네이션 UI 구현 및 페이징 적용된 list, paging 관련 데이터 반환

props

이름	타입	기본값	설명
service	Object		데이터를 가져올 서비스 객체. uri 보다 우선순위가 높습니다.
uri	String	null	API 엔드포인트 URI (service 가 null 일 경우 해당 URI로 데이터 로드)
query	Object	false	검색 조건 query 객체
finally	Function		데이터 로드가 완료된 후 실행할 콜백 함수
callback	Obejct		데이터 처리 후 실행할 콜백 함수
options	Object		페이지네이션 관련 설정
defaultSortBy	Object		기본 정렬
grid	Object		grid 객체
ns	String	nv	totalCount, dataPerPage, currentPage 를 헤더에 설정 할 때 사용되는 네임스페이스

예제

  <nv-pagination 
        ref="pagination" 
        class="float-left" 
        :service="service" 
        :query="query" 
        @paginated="paginated">
  </nv-pagination>

  <script setup>
    import {ref, useTemplateRef} from 'vue';

    const pagination = useTemplateRef('pagination');
    const list = ref([]);
    const service = new ApiService();   // data load api service

    onMounted(async () => {
        query.dataPerPage = dataPerPageList[0];
        await nextTick();
        retrieve();
    });

    const retrieve = () => {
        pagination.value.go(1, query);
    }

    const paginated = (data) => {
        list.value = data;
    }
  </script>

pagination.value.go(1, query)

• 전달된 API 서비스 객체의 list 를 통해 데이터 로드 후 response data 를 전달하는 paginated 호출
• paginated 를 통해서 grid 등에 데이터 전달 로직 구현

TIP

API 서비스 객체가 없거나 특정 URL로 대체 해야 되는 경우
:service를 제외하고 :uri 로 API URI 전달 시, 해당 URI, query를 사용하는 기본 GET AJAX 통신 이용 가능

emit

load

페이지네이션 컴포넌트 로드가 완료 된 후 호출

before-pagination

API를 통해 데이터를 가져오기 전에 호출

paginated

API를 통해 테이터 로딩 완료 후 데이터 전달을 위해 호출