페이징 인덱스 만들기 / 페이지네이션 만드는 법

 

var getPagingHtml = function(param) {
	// 페이징 인덱스 클릭했을 때 실행할 함수 이름
    var callFunc = param.callFunc;    
	// 페이징을 넣을 html 상위 요소의 id
    var paginationWrapperId = param.paginationWrapperId;    
	// 한 페이지에 게시물을 몇 개 보여줄지
    var itemNumPerPage = param.itemNumPerPage;    
	// 총 게시물이 몇 개인지
    var totalItemNum = param.totalItemNum;    
	// 페이징 인덱스를 한 번에 몇 개씩 보여줄지
    var pagingSize = param.pagingSizeNum;    
	// 현재 페이지
    var currentPage = param.currentPage    
	// html 초기화
    var HTML = "";  
	
	// 결과가 하나라도 있을 경우에만 페이징 html 만드는 작업 실행 / 없으면 초기화 상태 그대로 return
    if(totalItemNum > 0) {  
		// null 처리, 값이 없으면 defalt 값 지정
        if (itemNumPerPage == undefined || itemNumPerPage == 0) {   
			itemNumPerPage = 4;
		}
		
		// null 처리, 값이 없으면 defalt 값 지정
        if(pagingSize = undefined || pagingSize == 0) { 
			pagingSize = 10;
		}
		
		var lastPage = 0;
		var firstPage = 0;
		
		// 예외 처리 / 현재 페이지가 1보다 작을 수 없음
        if(currentPage  < 1) {  
			currentPage = 1;
		}
		
		// 마지막 페이지 구하기 / 총 게시물을 한 페이지 크기로 나눠서 몇 페이지까지 있는지 / ceil을 사용해서 게시물이 마지막에 하나라도 남았으면 한 페이지 더 만들기
        if(totalItemNum > 0) {  
			lastPage = Math.ceil(totalItemNum / itemNumPerPage);
		}
		
		// 예외 처리 / 마지막 페이지가 1보다 작을 수 없음
        if(lastPage < 1) {  
			lastPage = 1;
		}
		
		// 예외 처리 / 현재 페이지가 마지막 페이지보다 클 수 없음
        if(curentPage > lastPage) { 
			currentPage = lastPage;
		}
		
		// 화면에 보여줄 페이징에서 인덱스가 시작되는 첫 숫자 구하기 / 시작은 10단위부터 ex) 1, 11, 21
        var start = Math.floor( (currentPage - 1) / pagingSize) * pagingSize + 1;   
		// 화면에 보여줄 페이징에서 가장 마지막 페이지 구하기 / 1부터 10까지, 11부터 20까지, 21부터 30까지, 이런 식이라 시작 인덱스에서 페이징 인덱스 크기를 더해줌
        var end = start + (pagingSize - 1); 
		
		// 이전 페이징으로 넘어가는 인덱스 구하기 / 현재 31번대 페이징이면 21번대로, 현재 21번대 페이징이면 11번대로 넘어가기
        firstPage = (start - 1) - pagingSize;   
		
		// 예외 처리 / 넘어갈 수 있는 페이징은 1보다 작을 수 없음
        if(firstPage < 1) { 
			firstPage = 1;
		}
		// 예외 처리 / 화면에 보여주는 페이징에서 마지막 인덱스는 총 인덱스 크기보다 클 수 없음
        if(end > lastPage) {    
			end = lastPage;
		}
		// 예외 처리 / 현재 페이지는 화면에 보여주는 마지막 페이징보다 더 클 수 없음
        if(currentPage > end) { 
			currentPage = end;
		}
		// 페이징이 한 묶음 이상이 나올 경우에는 이전 묶음으로 가는 버튼 만들기 / ex) 예를 들어 1-10, 11-20, 21-30 이렇게 묶어서 보여주는데 1-7까지밖에 없거나, 1-3까지밖에 없으면 이전 묶음으로 넘어가는 기능이 필요 없음. 반대로 36페이지까지 있으면 30-36 페이징 묶음에서 21-30 페이징 묶음으로 넘어가는 기능이 필요함.
        if(start > pagingSize) {    
			HTML += '<a href="javascript:' + callFunc + '(0)">(<<)</a>';
			HTML += '<a href="javascript:' + callFunc + '(' + firstPage + ')">(<)</a>';
		}

		// 페이징 시작
        HTML += "<div>";    
		for(var i = start; i <= end; i++) {
			// 현재 페이지 강조하기
            if(currentPage == i) {  
				HTML += '<span class="color-red"><a href="javascript:' + callFunc + '(' + i + ')">' + i + '</a></span>';
			} else {  
				HTML += '<span><a href="javascript:' + callFunc + '(' + i + ')">' + i + '</a></span>';
			}
		}
		HTML += "</div>";
		// 화면에 보여주는 페이징에서 마지막 페이지가 총 페이지 수보다 작은 경우에는 다음 묶음으로 넘어가는 버튼 필요
        if(end != lastPage) {   
			HTML += '<a href="javascript:' + callFunc + '(' + end + ')">(>)</a>';
			HTML += '<a href="javascript:' + callFunc + '(' + lastPage + ')">(>>)</a>';
		}
		
	}
	document.querySelector('#' + paginationWrapperId).innerHTML = HTML;
};