style24.front/src/main/webapp/ux/plugins/gaga/gaga.paging.js

/*
 * Pagination Common Java Script written by gagamel.
 *
 * Copyright (c) 2019 gagamel
 * Dual licensed under GPL (GPL-LICENSE.txt) licenses.
 *
 * $Date: 2019-07-21 $
 * 
 * 사용 예)
 * 		// HTML 태그는 다음과 같은 구조로 되어 있어야 한다.
 * 		<div class="tablePaging" id="pagination">
 * 			<a href="#pageNo=1">1</a>
 * 			<a href="#pageNo=2">2</a>
 * 			...
 * 		</div>
 * 
 * 		// Import할 자바스크립트 파일
 * 		<script type="text/javascript" src="/ux/plugins/gaga/gaga.paging.js"></script>
 * 
 * 		<script type="text/javascript">
 * 			// Initialize a pagination
 * 			gagaPaging.init('searchForm', fnSearchGoodsQnaCallback, 'pagination');
 * 			
 *			// Load data
 * 			gagaPaging.load($('#searchForm input[name=pageNo]').val(), $('#searchForm select[name=pageSize]').val());
 * 
 * 			var fnSearchGoodsQnaCallback = function(result) {
 * 				// Handle Data
 * 				...
 * 				
 * 				// Create pagination
 * 				gagaPaging.createPagination(result.goodsAsk.pageable);
 * 			}
 *		</script>
 */

var gagaPaging = {

	oFormId : '',
	oCallbackFn : '',
	oPaginationId : '',
	nPageSize : 50,
	nPageUnit : 10,
	
	/**
	 * Initialize a pagination
	 * @param formId - Form ID. 검색조건 폼 ID
	 * @param callbackFn - Callback function. 데이터 조회 후 처리하는 콜백함수
	 * @param paginationId - Pagination ID. 페이징을 구성하는 div 태그 ID
	 * @param pageSize - 조회할 데이터 row수. 옵션
	 * @param pageUnit - 그룹핑 페이지 단위. 옵션
	 * 사용 예)
	 * 		// Initialize a pagination
	 * 		gagaPaging.init('searchForm', fnSearchGoodsQnaCallback, 'pagination');
	 * 		or
	 * 		gagaPaging.init('searchForm', fnSearchGoodsQnaCallback, 'pagination', 50);
	 * 		or
	 * 		gagaPaging.init('searchForm', fnSearchGoodsQnaCallback, 'pagination', 50, 10);
	 */
	init : function(formId, callbackFn, paginationId, pageSize, pageUnit) {
		oFormId = formId;
		oCallbackFn = callbackFn;
		oPaginationId = paginationId;
		if (typeof(pageSize) != 'undefined') nPageSize = pageSize;
		if (typeof(pageUnit) != 'undefined') nPageUnit = pageUnit;
	},
	
	/**
	 * Create a pagination
	 * @param pageable - page 정보
	 */
	createPagination : function(pageable) {
		// Generate pagination
		var html;
		if (gagajf.isNull(pageable.generatedPagination)) {
			html = gagaPaging.generatedPagination(pageable);
		} else {
			html = pageable.generatedPagination;
		}
		$('#' + oPaginationId).html(html);
		// Bind event
		gagaPaging.bind();
	},
	
	/**
	 * Bind the pagination's event
	 * Paging 처리 시 다음과 같이 지정
	 * 사용 예)
	 * 		// HTML 태그는 다음과 같은 구조로 되어 있어야 한다.
	 * 		<div class="tablePaging" id="pagination">
	 * 			<a href="#pageNo=1">1</a>
	 * 			<a href="#pageNo=2">2</a>
	 * 			...
	 * 		</div>
	 */
	bind : function() {
		$('#' + oPaginationId + ' a').on('click', function(e) {
			var params = $(this).attr('href');
			params = params.replace(/^.*#/, '');
			
			var pageNo = 1;
			
			if (!gagajf.isNull(params)) {
				pageNo = params.split("=")[1];
			}
			
			gagaPaging.load(pageNo);
			
			return false;
		});
	},
	
	/**
	 * Load data and call a callback function
	 * JSON 형태로 보내고 받는 후 콜백함수에서 데이터를 처리한다.
	 * @param pageNo - 조회할 페이지번호
	 */
	load : function(pageNo) {
		$('#' + oFormId + ' input[name=pageNo]').val(pageNo);
		$('#' + oFormId + ' input[name=pageSize]').val(nPageSize);
		
		// comma(,) 제거
		gagajf.removeCommaAtNumberFormattedInput('#' + oFormId);
		var jsonData = JSON.stringify($('#' + oFormId).serializeObject());
		
		$.ajax({
			type : 'POST',
			url : $('#' + oFormId).prop('action'),
			data : jsonData,
			dataType : 'JSON',
			beforeSend : function(xhr, settings) {
				// dataType: "json"일 때
				xhr.setRequestHeader('Accept', 'application/json');
				xhr.setRequestHeader('Content-Type', 'application/json');
				
				// Button disabled & progressBar creation
				//gagajf.showProgressbar(true);
			},
			complete : function() {
				// Button abled & progressBar remove
				//gagajf.showProgressbar(false);
			},
			success : function(result) {
				try {
					if (!gagajf.isNull(result.error.message)) {
						mcxDialog.alert(result.error.message);
						return;
					}
				} catch(e) {
					// Do nothing
				}
				
				if (typeof(oCallbackFn) == 'function') {
					oCallbackFn.call(this, result);
				}
			},
			error : function(result) {
				mcxDialog.alert('오류로 인해 처리되지 않았습니다.');
			}
		});
	},
	
	generatedPagination : function (pageable) {
		let pageNo = pageable.pageNo;
		let pageSize = pageable.pageSize;
		let pageUnit = pageable.pageUnit;
		let totalCount = pageable.totalCount;
		let firstCount = (getPageGroup() - 1) * pageable.pageUnit + 1;
		let loopCount = firstCount + pageUnit;
		if (loopCount > getTotalPage()) {
			loopCount = Number(getTotalPage() + 1);
		}
		
		let pageTag = '';
		if (!(firstCount == 1 && loopCount == 1)) {
			if (pageNo == 1) {
				pageTag += '<li class="disabled"><a href="#" alt="맨처음">«</a></li>\n';
			} else {
				pageTag += '<li><a href="#pageNo=1" alt="맨처음">«</a></li>\n';
			}

			if (getPageGroup() == 1) {
				if (pageNo == 1) {
					pageTag += '<li class="prev disabled"><a href="#" alt="이전페이지">‹</a></li>\n';
				} else {
					pageTag += '<li class="prev"><a href="#" alt="이전페이지">‹</a></li>\n';
				}
			} else {
				pageTag += '<li class="prev"><a href="#pageNo=' + (getPageGroup()-1) * pageUnit + '" alt="이전페이지">‹</a></li>\n';
			}

			for (let i = firstCount; i < loopCount; i++) {
				if (pageNo == i) {
					pageTag += '<li class="active"><a href="#">' + i + '</a></li>\n';
				} else {
					pageTag += '<li><a href="#pageNo=' + i + '">' + i + '</a></li>\n';
				}
			}
			
			if (loopCount <= (Number(getTotalPage() + 1))) {
				if (getTotalPage() > loopCount) {
					pageTag += '<li class="next"><a href="#pageNo=' + (getPageGroup() * pageUnit + 1) + '" alt="다음페이지">›</a></li>\n';
				} else {
					pageTag += '<li class="next"><a href="#pageNo=' + getTotalPage() + '" alt="다음페이지">›</a></li>\n';
				}
				pageTag += '<li><a href="#pageNo=' + getTotalPage() + '" alt="맨마지막">»</a></li>\n';
			}
		}

		function getPageGroup() {
			return parseInt((pageNo-1) / pageUnit + 1 );
		}

		function getTotalPage() {
			let totalPage = parseInt(totalCount / pageSize);
			if (totalCount % pageSize > 0) {
				totalPage++;
			}
			return totalPage;
		}

		return pageTag;
	}

}