javascript 페이징

* 위 그림과 같은 페이징 구현을 위한 javascript 소스 (단순한 jQuery가 약간 들어가 있음)

 - 필요한 데이터 : page 번호, 게시판 전체 count, 화면에 뿌려질 글 count, 네비게이터 count

 - java 단에서 pageBlock만큼 데이터를 가져온다는 가정하에 작성

 - class는 무시하고 원하는 입맞에 맞게 변경하면 됨

pagingView : function(startIndex) {

var pagingHTML = "";

var page = parseInt($("#page").val());

var totalCount = parseInt($("#totalCount").val());

var pageBlock = parseInt($("#pageBlock").val());

var navigatorNum    = 10;

var firstPageNum = 1;

var lastPageNum = Math.floor((totalCount-1)/pageBlock) + 1;

var previewPageNum  = page == 1 ? 1 : page-1;

var nextPageNum = page == lastPageNum ? lastPageNum : page+1;

var indexNum = startIndex <= navigatorNum  ? 0 : parseInt((startIndex-1)/navigatorNum) * navigatorNum;

if (totalCount > 1) {

if (startIndex > 1) {

pagingHTML += "<a class='btn_first disabled' href='#' id='"+firstPageNum+"'><em>Go First</em></a> ";

pagingHTML += "<a class='btn_prev disabled' href='#' id='"+previewPageNum+"'><em>Preview</em></a> ";

}

for (var i=1; i<=navigatorNum; i++) {

var pageNum = i + indexNum;

if (pageNum == startIndex) 

pagingHTML += "<a class='selected' href='#' id='"+pageNum+"'>"+pageNum+"</a> ";

else 

pagingHTML += "<a href='#' id='"+pageNum+"'>"+pageNum+"</a>  ";

if (pageNum==lastPageNum)

break;

}

if (startIndex < lastPageNum) {

pagingHTML += "<a class='btn_next' href='#' id='"+nextPageNum+"'><em>Next</em></a> ";

pagingHTML += "<a class='btn_end' href='#' id='"+lastPageNum+"'><em>Go End</em></a>";

}

}

$(".paging").html(pagingHTML);

$(".paging a").click(function (e) {

paging($(this).attr('id'));

});

}