// 스크립트
function Pagination() {
this.data = {
pageTagId: "#paging",
currentPage: 1,
pageSize: 10, //페이지 갯수 1|2|3|4|5
listCount: 10, //아이템 Count
totalCnt: 0,
totalPageCnt: 0
};
this.pageCallback = function (pageNum) { };
}
Pagination.prototype.makePage = function (divPageId, totalCnt, listCount, pageSize, currentPage) {
this.data.pageTagId = "#" + divPageId;
this.data.currentPage = currentPage;
this.data.totalCnt = totalCnt;
this.data.listCount = listCount;
this.data.pageSize = pageSize;
this.setPagingHtml();
};
Pagination.prototype.gotoPage = function (e) {
var thisObj = e.data.obj;
var pageNum = e.currentTarget.getAttribute("data-pagenum");
thisObj.data.currentPage = pageNum; //입력받은 페이지번호를 현재페이지로 설정
thisObj.pageCallback(pageNum);
scroll(0, 0);
return false;
};
Pagination.prototype.setPagingHtml = function () {
var _ = this;
if (_.data.totalCnt == 0) {
$(this.data.pageTagId).html("");
return "";
}
//총페이지수 구하기 : 페이지 출력 범위 (1|2|3|4|5)
_.data.totalPageCnt = Math.ceil(_.data.totalCnt / _.data.listCount);
var n_block = Math.ceil(_.data.currentPage / _.data.pageSize);
//페이징의 시작페이지와 끝페이지 구하기
var s_page = (n_block - 1) * _.data.pageSize + 1; // 현재블럭의 시작 페이지
var e_page = n_block * _.data.pageSize; // 현재블럭의 끝 페이지
var sb = '';
var sbTemp = '';
//이전 페이지셋으로
var prePageOfPageList = parseInt(_.data.currentPage) - 1; // 이전 페이지 리스트 시작
if (prePageOfPageList < 1) {
sb += '<a href="#" class="btn_prev_paging" onclick="return false;"><span class="hidden">이전 페이지</span></a> ';
}
else {
sb += '<a href="#" class="btn_prev_paging" data-pagenum="' + prePageOfPageList + '" ><span class="hidden">이전 페이지</span></a> ';
}
// 블럭의 페이지 목록 및 현재페이지 강조
for (var j = s_page; j <= e_page; j++) {
if (j > _.data.totalPageCnt) {
break;
}
if (j == _.data.currentPage) {
sbTemp += '<a href="#" onclick="return false;" class="on">' + j + '</a> ';
} else {
sbTemp += '<a href="#" data-pagenum="' + j + '">' + j + '</a> ';
}
}
sb += sbTemp;
//다음페이지셋으로
var nextPageOfPageList = parseInt(_.data.currentPage) + 1; // 다음 페이지 리스트 시작
if (nextPageOfPageList > _.data.totalPageCnt) {
sb += '<a href="#" class="btn_next_paging" onclick="return false;"><span class="hidden">다음 페이지</span></a>';
}
else {
sb += '<a href="#" class="btn_next_paging" data-pagenum="' + nextPageOfPageList + '"><span class="hidden">다음 페이지</span></a>';
}
var $divPage = $(this.data.pageTagId);
$divPage.html(sb);
$divPage.find('a[data-pagenum]').on("click", { obj: this }, this.gotoPage);
};
// 활용#1
var pager = new Pagination();
<input type="hidden" id="pageSize" value="10" />
<input type="hidden" id="pageNo" value="1" />
<div id="pager" class="paging"></div>
// 활용#2
