Wijmo에서 숫자형 Pagination 구현하기

FlexGrid Wijmo에서 숫자형 Pagination 구현하기

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-10-01 16:37 조회 1,746회 댓글 0건

검색

본문

관련링크

페이징은 큰 데이터 컬렉션을 처리하기 위한 일반적인 기술로, Wijmo에서는 CollectionView 클래스를 이용하여 클라이언트 측 페이징을 구현할 수 있습니다. 클라이언트 측 페이징을 통해 그리드에 적절한 양의 데이터만 나타낼 수 있습니다.

참고 :
페이징 대신 Wijmo에서 제공하는 가상 스크롤을 이용하여, 사용자에 스크롤을 통한 부드러운 페이징 방식을 제공할 수도 있습니다.

하지만 Wijmo에서는 기본 제공하는 페이징의 형식의 경우, 국내에서 일반적으로 많이 사용하는 방식과 달라, Wijmo의 FlexGrid에서 숫자형 페이징 UI 구현을 위한 샘플을 요청을 많이 해주셨습니다.

이에 숫자형 페이징 UI를 구현하고자 하시는 고객 분들을 위해 해당 튜토리얼을 작성하였습니다. 이러한 경우, Wijmo에서 해당 UI 및 기능을 직접적으로 지원하지 않고 있어 자체적으로 코드로 구현하셔야 합니다.

이번 튜토리얼에서 숫자형 페이징을 커스터마이징하는 방법에 대해서 알려드릴 예정이며 JQuery도 함께 사용되었습니다. 페이징과 관련한 별도 코드 및 참고 페이지를 확인하고 싶으신 경우, 여기를 클릭하여 주시기 바랍니다.

아래에서 기본 Wijmo 클라이언트 측 페이징과 숫자형 페이징 각각에 대한 코드를 확인하실 수 있습니다. 또한, 상단의 HTML, CSS, JS 탭을 클릭하여 소스 코드를 바로 수정해보실 수 있습니다.

기본 Wijmo 클라이언트 측 페이징

Wijmo의 CollectionView 객체에서 데이터 항목 또는 페이지를 탐색하기 위한 UI 제공하는 CollectionViewNavigator 클래스를 통해 구현된 기본적인 페이징 유형입니다.

headerFormat 속성을 사용하여 내비게이터가 표시하는 텍스트를 사용자 정의할 수 있습니다.

샘플 링크 : https://codepen.io/GrapeCity-Korea/pen/qBjgqYp

숫자형 페이징

샘플 링크 : https://codepen.io/GrapeCity-Korea/pen/0d8e8e3c8b09962a9521706cf18bfbbd

Wijmo 숫자형 Pagination 구현하기 튜토리얼

1. 먼저 Wijmo 컨트롤을 사용하기 위해 HTML의 head 태그 안에 레퍼런스를 추가해줍니다. * JQuery CDN도 추가하여 주시길 바랍니다.

<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.20212.808/styles/wijmo.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
   
<script src="https://cdn.grapecity.com/wijmo/5.20212.808/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20212.808/controls/wijmo.grid.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

2. Wijmo 컨트롤을 DOM 요소에 할당할 'theGrid', 페이징 요소가 들어갈 'pager'라는 id를 가진 각각의 div 요소를 HTML 파일에 생성합니다.

<div id="theGrid"></div>

<div id="pager"></div>

3. script 태그 안에 그리드에 추가할 랜덤 데이터를 만드는 함수 getData를 생성합니다.

function getData() {
 var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = [];
 for (var i = 0; i < 300; i++) {
   data.push({
     id: i,
     country: countries[i % countries.length],
     active: i % 5 != 0,
     downloads: Math.round(Math.random() * 200000),
     sales: Math.random() * 100000,
     expenses: Math.random() * 50000
  });
}
 return  data;
}

4. 그리드의 인스턴스를 생성하고 CollectionView를 itemsSource에 데이터로 할당해 줍니다.

페이징을 그리드에 적용하기 위해서 CollectionView의 페이지 크기를 설정하는 pageSize 속성을 지정해줍니다.
- pageSize : 각 페이지에 표시할 항목 수를 가져오거나 설정합니다. 속성의 기본 값은 페이징을 비활성화하는 0입니다.

var view = new wijmo.collections.CollectionView(getData(),{pageSize:10});

//그리드 생성
var grid =  new wijmo.grid.FlexGrid('#theGrid', {
   headersVisibility: 'Column',
   alternatingRowStep: 0,
   itemsSource: view,
});

5. 2번 단계에서 설정한 pager 요소에 addEventLister로 click 이벤트를 추가해 줍니다.

document.getElementById("pager").addEventListener("click",function(event){
(...)
})

6. 사용자 정의 페이징 기능 구현을 위한 refreshPaging이라는 사용자 정의 함수를 생성합니다.

페이징 기능을 위해 사용될 전체 페이지, 페이지 인덱스 등 상수 및 변수들을 설정합니다.

function refreshPaging(totalData,currentPage){
   //페이지 사이즈
   const dataPerPage = grid.collectionView.pageSize; // 그리드의 한 페이지당 보여지는 행의 개수
   // 페이지 숫자 목록
   const pageCount = 5;
   //전체 페이지
   const totalPage = Math.ceil(totalData / dataPerPage);
     // 현재 페이지 인덱스
   if (currentPage <= 0) {
     // 만약 가장 앞이라면
     currentPage = 1; // pageGroup 설정을 위해 1로 할당
  }
   let pageGroup = Math.ceil((currentPage+1) / (pageCount )); // 페이지 그룹 설정
}

7. 그 다음, 현재 페이징에서 보여질 번호 목록을 설정하기 위해 첫 번째, 마지막, 이전(페이지 목록), 다음 값에 대해서 설정합니다.

function refreshPaging(totalData,currentPage){
(...)
let last = pageGroup * pageCount; // 가장 마지막 인덱스

   if (last > totalPage) {
     last = totalPage;
  }
   let first = last - pageCount;
   const next = last + 1; // 다음
   var prev = first ; // 이전

   if (prev < -1) {
     // 맨 처음 인덱스에서 뒤로 넘어가지 않도록 설정
     prev = -1;
  }
   if (totalPage < 1) {
     first = last;
  }

8. 페이징 DOM 요소를 추가할 div 요소를 가져온 다음, 선택한 요소의 내용을 지우는 empty() 메서드로 내용을 지워준 뒤, pages 요소에 input 요소들을 append 합니다.

pager 요소가 할당된 pages 변수에 append를 하여 맨 첫 번째 페이지로 이동하는 버튼(<<)과 이전 페이지로 이동하는 버튼(< )을 추가해줍니다.
이전 페이지 버튼 요소에 페이지 이동 계산을 위해서 요소의 id에 prev을 설정해 줍니다.

 function refreshPaging(totalData,currentPage){
    const pages = $('#pager')
   pages.empty();

   pages.append('<input type="button" class="numberPage" id="1" value ="<<"> </>') // 맨 첫번째 페이지 버튼

   pages.append('<input type="button" class="numberPage" id=' + prev + ' value =' + '<' + '></>')  //이전 페이지 버튼
}

}

9. 그 다음 페이징에 번호를 추가하기 위해서 현재 페이지 인덱스 크기만큼 반복하여 요소를 append 합니다.

페이지 번호 추가 이후, 다음 페이지로 이동하는 버튼(>)과 맨 마지막 페이지로 이동하는 버튼(>>) 또한 append 해 줍니다.

다음 페이지로의 이동 계산을 위해 id에 next 값을, 맨 마지막 페이지로의 이동을 위해 id에 totalPage 값을 추가해 줍니다.

function refreshPaging(totalData,currentPage){
    (...)
   for(let j = first+1; j <=last; j++){ // 현재 페이지 인덱스 만큼 append
     if(currentPage === j || j > 0)){
       pages.append('<input type="button" class="numberPage" id=' + j + ' value =' + j + '></>')
    }
  }

   pages.append('<input type="button" class="numberPage" id=' + next + ' value = ">" + > </>')
   pages.append('<input type="button" class="numberPage" id='+totalPage+' value =">>"> </>')  9  
}

}

10. 위와 같이 refreshPaging 사용자 정의 함수 구현이 끝났다면 초기 로드 시, 첫 페이지를 보여주기 위해 아래와 같이 함수를 호출합니다.

collectionView의 totalItemCount는 페이징을 적용하기 전 총 항목 수를 가져오는 속성이며 전체 항목 값을 할당하는 데 사용될 예정입니다.

refreshPaging(grid.collectionView.totalItemCount,1)  // 페이징 초기 셋팅

11. pager 요소를 클릭 시, numberPage가 포함된 요소 즉, 페이징 버튼을 클릭할 때만 refreshPaging 함수가 호출될 수 있도록 설정합니다.

페이징 버튼을 클릭 시 그리드의 view도 변화가 있어야 하기 때문에 CollectionView에서 특정 인덱스로 페이지가 이동할 수 있게 하는 moveToPage로 페이지를 이동합니다.

 document.getElementById("pager").addEventListener("click",function(event){

   if (event.target.classList.contains("numberPage")) {
     var idx = +event.target.id -1; // 0부터 시작

     grid.collectionView.moveToPage(idx) // 그리드 뷰 변경을 위헤 moveToPage
     refreshPaging(grid.collectionView.totalItemCount,idx) // 그리드의 전체 아이템 수, 클릭한 인덱스 값 넘겨주기
  }
})

이상으로 Wijmo에서 숫자형 페이징을 가진 페이지네이션 구현 방법에 대한 튜토리얼을 끝마쳤습니다. Wijmo FlexGrid에서 페이징을 통한 효율적인 데이터 관리 및 UI를 구성해 보시기 바랍니다.

지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!