페이지 네비게이션을 사용하여 페이지 이동.
리얼그리드의 기능과 자바스크립트를 이용하여 페이지 네비게이터를 구현한 데모 입니다. 그리드 하단에 페이지 네비게이터가 위치할 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);
})
}