개발/WEB PROGRAMMING

[ JAVASCRIPT ] AJAX 호출한 LIST값 페이징(PAGING) 처리하기

itaekwon class 2020. 3. 18.
728x90

 

/**
 * @alias 페이징 처리 함수
 * @param nowPage 현재 페이지 번호
 * @param pageSize 리스트 글 갯수
 * @param blockPage 페이지 갯수
 * @param callback 콜백 함수
 */
function generatePagingHTML(nowPage, pageSize, totalCount, blockPage, goToFoward, tranId){
	if(totalCount != 0){
		var totalPage  = Math.ceil(totalCount/pageSize);
		
		btImgFirst="/images/common/btn/bt_fst.gif"; 
		btImgPrev="/images/common/btn/bt_prev.gif";
		btImgNext="/images/common/btn/bt_next.gif";
		btImgLast="/images/common/btn/bt_end.gif";
		
		var paggingStr = "";
		var intTemp = -1;
		var intLoop = -1;
		
		nowPage = parseInt(nowPage);
					
		if( nowPage != 1 ){
			if( btImgFirst == "" ){
				paggingStr += " <li class=\"fst\"><a href='javascript:"+goToFoward+"(\"" + tranId + "\", 1)'>◀</a></li>\n";
			}else{
				paggingStr += " <li class=\"fst\"><a href='javascript:"+goToFoward+"(\"" + tranId + "\", 1)'><img src='" + btImgFirst + "' alt=\"처음리스트\" ></a></li>\n";
			}
			if( btImgFirst == "" ){
				paggingStr += " <li class=\"prev\"><a href='javascript:"+goToFoward+"(\"" + tranId + "\", " + (nowPage-1) + ")'><</a></li>\n";
			}else{
				paggingStr += " <li class=\"prev\"><a href='javascript:"+goToFoward+"(\"" + tranId + "\", " + (nowPage-1) + ")'><img src='" + btImgPrev + "' alt=\"이전리스트 10개\" ></a></li>\n";
			}
		}else{
			if( btImgFirst == "" ){
				paggingStr += " ◀\n";
			}else{
				paggingStr += " <li class=\"fst\"><a><img src='" + btImgFirst + "' alt=\"처음리스트\" ></a></li>\n";
			}
			if( btImgFirst == "" ){
				paggingStr += " <";
			}else{
				paggingStr += " <li class=\"prev\"><a><img src='" + btImgPrev + "' alt=\"이전리스트 10개\" ></a></li>\n";
			}
		}
		
		intTemp = Math.floor((nowPage - 1) / (blockPage*1.0)) * blockPage + 1;
		intLoop = 1;

		while( !( (intLoop > blockPage) || (intTemp > totalPage) ) ){
			if( intTemp == nowPage ){
				paggingStr += " <li class='on'><a  href='javascript:"+goToFoward+"(\"" + tranId + "\", " + intTemp + ")'>" + intTemp + "</a></li>\n";
			}else{
				paggingStr += " <li><a  href='javascript:"+goToFoward+"(\"" + tranId + "\", " + intTemp + ")'>" + intTemp + "</a></li>\n";
			}
			intTemp = intTemp + 1;
			intLoop = intLoop + 1;
		}
		if( nowPage != totalPage){
			if( btImgNext == "" ){
				paggingStr += " <li class=\"next\"><a href='javascript:"+goToFoward+"(\"" + tranId + "\", " + (nowPage+1) + ")'>></a></li>\n";
			}else{
				paggingStr += " <li class=\"next\"><a href='javascript:"+goToFoward+"(\"" + tranId + "\", " + (nowPage+1) + ")'><img src='" + btImgNext + "' alt=\"다음리스트 10개\" ></a></li>\n";
			}
			if( btImgLast == "" ){
				paggingStr += " <li class=\"end\"><a href='javascript:"+goToFoward+"(\"" + tranId + "\", " + totalPage + ")'>▶</a></li>\n";
			}else{
				paggingStr += " <li class=\"end\"><a href='javascript:"+goToFoward+"(\"" + tranId + "\", " + totalPage + ")'><img src='" + btImgLast + "' alt=\"마지막리스트\" ></a></li>\n";
			}
		}else{
			if( btImgNext == "" ){
				paggingStr += " >";
			}else{
				paggingStr += " <li class=\"next\"><a><img src='" + btImgNext + "' alt=\"다음리스트 10개\" ></a></li>\n";
			}
			if( btImgLast == "" ){
				paggingStr += " ▶\n";
			}else{
				paggingStr += " <li class=\"end\"><a><img src='" + btImgLast + "' alt=\"마지막리스트\" ></a></li>\n";
			}
		}
		$(".pagingNav").html(paggingStr);
	}else{
		$(".pagingNav").html("");
	}
}
728x90

댓글