[tui grid] 페이징(pagination) 처리하는 방법

설명 : remote data 조회 기준으로 그리드 한 페이지에 100건 씩 조회되도록 처리

1. grid에 설정

// 그리드 출력 grid = new tui.Grid({  ...(생략)...   pagination: true });

2. 화살표 이동시 조회 함수 호출

pagination = grid.getPagination(); pagination.on('beforeMove',function(ev){ if(searchGu){ // 조회시에는 beforeMove 안 태우기 searchGu=false; return; } page = ev.page; search(page); });

3. 기본은 1page

//그리드 출력   search(1);

4. html 소스

<button type="button" class="btnSearch" onclick="searchGu=true;search(1);"><i class="fa fa-search"></i>검색</button>

5. 조회 함수

function search(page) {  ...(생략)...     var data = {       ... (생략) ...       "START_NUM" : (page-1)*100  // 조회할때 100개씩 끊기   }         jcm.doAjax(       true,        "/data/jobHistory/getJobHistoryList",        data,        function(data) {         grid.setData(data.jobHistoryList);         if(data.jobHistoryList.length == 0){ pagination.setTotalItems(10);         }else { pagination.setTotalItems(data.jobHistoryList[0].CNT*10); // totalItem는 10단위가 1페이지입니다.         }         pagination._paginate(page); // 페이지 선택( 및 전체페이지까지) 적용       }         );  }

6. mysql 쿼리문

...(생략)... ORDER BY UPDATE_DT DESC LIMIT ${START_NUM},100

ps) 질문 있으시면 댓글 남겨주세요.