화면 깜빡임 없이 javascript(Ajax)로 페이징 처리하기

juso.go.kr의 api를 호출해서 페이징 처리때문에 계속 검색검색..

 

해보니... 생각보다 쉬운거였잖아? 라고 생각함..

개발은 너무 어렵게 생각하면 역시나 답이 없음.

 

function에 ajax로 호출하는 소스작성하고

success 하는 콜백단에 function을 호출하는 방식으로 콜백의 콜백의 콜백을 하는 방식이라고 보면된다.

javascript라 가능한 소스구현 방식!

 

빠꾸없이 소스로 표현하면 완전 간단하다!

 

// 주소가져오기(페이지추가)
function getAddr(num){
    var juso_keyword = $("#txt_juso_keyword").val();
	
    var pageSize = 10;
    var totalPages = 0;
    var curPage = num;
    $("input[name='currentPage']").val(curPage); // 페이지 바꿔주기
    
    $.ajax({
	url :"https://www.juso.go.kr/addrlink/addrLinkApiJsonp.do"  // 인터넷망
	,type:"post"
	,data:$("#juso_frm").serialize()
	,dataType:"jsonp"
	,crossDomain:true
	,success:function(jsonStr){
            var errCode = jsonStr.results.common.errorCode;
            var errDesc = jsonStr.results.common.errorMessage;
            var totalCount = jsonStr.results.common.totalCount;
            if(errCode != "0"){
            	console.log(errCode+"="+errDesc);
                alertWarning(errorTitle, errDesc, btnText);
                //closepop();
            }else{
            	if(jsonStr != null){
                    makeListJson(jsonStr);
                    
                    // 페이징처리
                    if (totalCount != 0) {
                    	totalPages = Math.ceil(totalCount / pageSize);
                        // pageLink(현재페이지, 전체페이지, 호출할 함수이름)
                        var htmlStr = pageLink(curPage, totalPages, "getAddr");
                        // common.js - pageLink
                        $("#div_paginate").html(htmlStr);
                    }
                    else{
                    	//alert("검색되는 주소없음")
                    }
            	}
            }
	}
	,error: function(xhr,status, error){
		alertWarning(errorTitle, "주소 에러발생", btnText);
	}
    });
}

주소API는 쇼핑몰이나 회원가입등등에 많이 유용하게 쓰인다.

다음주소API에서 간단하게 사용하는 툴이 있어서 굳이 이렇게까지 안해도 되긴하지만 ㅎㅎㅎ

커스터마이징이 필요한 프로그램에는 아무래도 다음에서 제공하는 다음API가 불편할 수 밖에 없다

 

행안부에서 제공하는 주소API의 방법대로 form방식으로 호출하고 콜백으로 다시 주소함수로 불러오면 된다.

pageLink 함수로 ajax를 호출하는 함수에 맞춰 페이지를 <a>태그로 만들어주는 형식이다.

 

function pageLink(curPage, totalPages, funName) {
	var pageUrl = "";
	
	var pageLimit = 5;
	var startPage = parseInt((curPage - 1) / pageLimit) * pageLimit + 1;
	var endPage = startPage + pageLimit - 1;
	
	if (totalPages < endPage) {
	    endPage = totalPages;
	}
	
	var nextPage = endPage + 1;
	//console.log(curPage,"curPage,",startPage,"startPage,",endPage,"endPage,",nextPage,"nextPage")
	
	//맨 첫 페이지
	if (curPage > 1 && pageLimit < curPage) {
	    pageUrl += "<a class='page first' href='javascript:" + funName + "(1);'><i class='fas fa-angle-double-left'></a>";
	}
	//이전 페이지
	if (curPage > pageLimit) {
	    pageUrl += " <a class='page prev' href='javascript:" + funName + "(" + (startPage == 1 ? 1 : startPage - 1) + ");'><i class='fas fa-angle-left'></a>";
	}
	//~pageLimit 맞게 페이지 수 보여줌
	for (var i = startPage; i <= endPage; i++) {
	    //현재페이지면 진하게 표시
	    if (i == curPage) {
	        pageUrl += " <a href='#'><strong>" + i + "</strong></a>"
	    } else {
	        pageUrl += " <a href='javascript:" + funName + "(" + i + ");'> " + i + " </a>";
	    }
	}
	//다음 페이지
	if (nextPage <= totalPages) {
	    pageUrl += "<a class='page next' href='javascript:" + funName + "(" + (nextPage < totalPages ? nextPage : totalPages) + ");'><i class='fas fa-angle-right'></a>";
	}
	//맨 마지막 페이지
	if (curPage < totalPages && nextPage < totalPages) {
	    pageUrl += "<a class='page last' href='javascript:" + funName + "(" + totalPages + ");'><i class='fas fa-angle-double-right'></a>";
	}
	//console.log(pageUrl);
	
	return pageUrl;
}

HTML 코드로 만들어서 리턴값으로 담아주고나서

$.append() 또는 $.html()로 담아주면 끝!

 

그러면 콜백의 콜백방식으로 페이징 처리가 끝난다.

화면 깜빡임 없이 페이징처리가 되면 팝업인듯 아닌듯 깔끔하게 호출이 가능하다

 

class='fas fa-angle-right' 등등 아이콘의 경우 여기 에서 다운받아서 사용하고 있다.

이 페이징 처리는 여러모로 쓸모가 많아서

굳이 주소페이징 처리가 아니여도

페이징이 필요한 모든곳이 사용중이다.

 

저는 개발자인지라 스타일(style.css)의 경우 제 디자인이 아니라 함부러 공유하기가 힘들지만

아마 찾아보면 많을것 같다 ^^..