그리드에서 페이징 처리

GridView.setPaging() 함수를 이용하여 그리드 자체적인 페이징 처리를 구현할 수 있습니다.

이 구현 방법은 전체 페이지 데이터를 DataProvider에 불러온 다음 처리하게 되므로 네트웍 리소스를 절약하기 위한 방안으로의 페이지네이션(Pagination)을 구현하는 것과는 다르다는 사실에 주의해야 합니다.

그리드에서 페이징 처리가 필요한가?

그리드를 사용하는 목적중 하나는 많은 양의 데이터를 스크롤하면서 조회하기 위한 것입니다. 그런데 왜? 그리드에서 페이지네이션을 구현해야 하는 걸까요?

고객의 요구에 의해 그리드에서도 페이지네이션을 구현할 필요가 있다면 RealGrid가 가지고 있는 자체 페이지네이션 기능을 이용할 수 있습니다.

현재 100행, 10행씩 10페이지로 쪼개기

페이징 처리를 위해 GridView.setPaging()함수를 이용합니다. 함수를 호출하면 DataProvider에 들어 있는 데이터를 페이지단위로 나누고 첫 페이지 데이터를 그리드에 표시 합니다.

페이지 정보를 가져오는 함수

GridView.getPage() - 현재 페이지 번호 가져오기 GridView.getPageCount() - 전체 페이지 수 가져오기

페이지가 변경될때 발행하는 이벤트

GridView.onPageChanging() - 페이지가 바뀌기 전 호출 GridView.onPageChanged() - 페이지가 바뀐 다음 호출 GridView.onPageCountChanged() - 페이지 갯수가 바뀐 다음 호출 하지만, 이 이벤트들은 GridView.setPaging()함수 호출시에는 발생하지 않습니다.

var page = -1;
var totalPage = -1;
 
gridView.setPaging(true, 10);
 
page = gridView.getPage();
totalPage = gridView.getPageCount();
 
$(".current-page-view").text(page + 1);
$(".total-page-view").text(pageCount);
 
gridView.onPageChanged = function(grid, page) {
  $(".current-page-view").text(page + 1);
}
 
gridView.onPageCountChanged = function(grid, pageCount) {
  $(".total-page-view").text(pageCount);
}
 
gridView.onPageChanged = function(grid, page) {
  $(".current-page-view").text(page + 1);
}
 
gridView.onPageCountChanged = function(grid, pageCount) {
  $(".total-page-view").text(pageCount);
}

페이지 이동

페이지를 이동하기 위한 함수는 GridView.setPage() 입니다.

RealGrid에서 페이징 처리시 page 번호는 모두 0부터 시작되는 숫자 입니다. 따라서 화면에 페이지 번호를 표시하기 위해서는 이점을 고려하여 1 을 더해 줄 필요가 있습니다.

function setPage3() {
  gridView.setPage(2);
}
 
function setPage7() {
  gridView.setPage(6);
}
 
function setPage100() {
  gridView.setPage(99);
}