페이지 네비게이션을 사용하여 페이지 이동.

리얼그리드의 기능과 자바스크립트를 이용하여 페이지 네비게이터를 구현한 데모 입니다. 그리드 하단에 페이지 네비게이터가 위치할 div를 생성하여 처리 합니다.

//페이지 네비게이션 생성 및 이동 처리
function paging(totalData, dataPerPage, pageCount, currentPage){
  console.log("currentPage : " + currentPage);
  
  var totalPage = Math.ceil(totalData/dataPerPage);    // 총 페이지 수
  var pageGroup = Math.ceil(currentPage/pageCount);    // 페이지 그룹
  
  console.log("pageGroup : " + pageGroup);
  
  var last = pageGroup * pageCount;    // 화면에 보여질 마지막 페이지 번호
  if(last > totalPage)
      last = totalPage;
  var first = last - (pageCount-1);    // 화면에 보여질 첫번째 페이지 번호
  var next = last+1;
  var prev = first-1;
  
  console.log("last : " + last);
  console.log("first : " + first);
  console.log("next : " + next);
  console.log("prev : " + prev);

  var $pingingView = $("#paging");
  
  var html = "";

  if(prev == 0) {
      html += "<a href=# id='first' className='disabled'>|<</a> ";
      html += "<a href=# id='prev' className='disabled'><</a> ";
  } else {
      html += "<a href=# id='first'>|<</a> ";
      html += "<a href=# id='prev'><</a> ";         
  }
  
  
  for(var i=first; i <= last; i++){
      html += "<a href='#' style='width: 50px' id=" + i + ">" + i + "</a> ";
  }
  
  if(last < totalPage) {
      html += "<a href=# id='next'>></a>";
      html += "<a href=# id='last'>>|</a>";
  } else {
      html += "<a href=# id='next' className='disabled'>></a>";
      html += "<a href=# id='last' className='disabled'>>|</a>";
  }
  
  $("#paging").html(html);    // 페이지 목록 생성
  
  $("#paging a").css({"color": "black",
                      "padding-left": "10px"});
                      
  $("#paging a#" + currentPage).css({"text-decoration":"none", 
                                     "color":"red", 
                                     "font-weight":"bold"});    // 현재 페이지 표시
                                     
  $("#paging a").click(function(){
      var $item = $(this);
      var $id = $item.attr("id");
      var selectedPage = $item.text();
      

      if($id == "first")   selectedPage = 1;
      if($id == "next")    selectedPage = next;
      if($id == "prev")    selectedPage = prev;
      if($id == "last")    selectedPage = totalPage;
      
      gridView.setPage(selectedPage-1);
      paging(totalData, dataPerPage, pageCount, selectedPage);
  });
                                     
}

//SelectBox를 이용한 페이지 이동
function setPageSelbox(totalData, dataPerPage){
  var totalPage = Math.ceil(totalData/dataPerPage);    // 총 페이지 수

  //SelectBox에 페이지를 채움
  for (var i=1; i <= totalPage; i++) {
      var optStr = "<option value=" + i + ">" + i + "</option>"
      console.log(optStr);
      $("#selBox").append(optStr);
  }

  //값 변경시 페이지 이동
  $("#selBox").change(function() {
      var totalData = dataProvider.getRowCount();    // 총 데이터 수
      var dataPerPage = 8;    // 한 페이지에 나타낼 데이터 수
      var pageCount = 3;        // 한 화면에 나타낼 페이지 수
      var selectedPage = $(this).val();

      gridView.setPage(selectedPage-1);
      paging(totalData, dataPerPage, pageCount, selectedPage);
  })
}