GET 방식을 이용한 Pagination하기

이번 포스팅에서는 게시판을 만들때 사용하는 페이지네이션 기능에 대해서 말씀드리려 합니다!

 

저만의 방법으로 만든 페이지네이션이므로 표준 페이지네이션에 대해선 책을 참조해주세요!

 

준비물

page, totalpage, limit 변수

 

Front

페이지를 다루기 위해서 페이지 출력 이전에 모든 글의 개수를 카운트해줘야하는데요.

 

만약 DB에 50개의 글이 있고, 10개씩 게시물 리스트를 출력해줘야한다면

 

모든 페이지 개수는 10개가 됩니다.

 

그럼 1부터 5번까지 페이지네이션 바를 만들어주면 됩니다!

 

이런식으로요!

 

javacript의 window.onload프로펄티는 웹페이지가 로드될때 수행됩니다.

 

여기에 ajax 요청을 보내서 모든 페이지의 개수를 가져올 수 있습니다.

 

이때 주의사항은 async를 false로 해줘야합니다~ 

 

비동기 여부를 표시하는것으로 비동기가 되면 서버에 보낸 데이터가 도착하기전에 다음 구문을 실행합니다.

window.onload=function(){
	var url=window.location.href;
	var page = document.getElementById("page").value;
	var pages = document.getElementById("pages");
	var limit = document.getElementById("limit").value;
	var total;
	if((total=sessionStorage.getItem('board'))==null || limit!=sessionStorage.getItem('limit') || total=='null'){
		$.ajax({
			url:ctx+"/boardpage",
			dataType:"json",
			type:"GET",
            async:false,
			data:"limit="+limit,
			success:function(data){
				total = data['total'];
				sessionStorage.setItem("limit",limit);
				sessionStorage.setItem("board",data['total']);
			},
			error:function(request,status,error){
				alert('데이터 전송 오류가 발생했습니다.');
				location.reload();
			}
		});
		
	}
	if(total>10){
		total=10;
	}
	if(page==1){
		pages.innerHTML = "<li class='disenable'> <a aria-label='Previous'> <span aria-hidden='true'>&laquo;</span></a> </li>";
	}else{
		pages.innerHTML = "<li> <a aria-label='Previous' onclick='prevPage("+page+")'> <span aria-hidden='true'>&laquo;</span></a> </li>";
	}
	for(var i=1; i<=total; i++){
		if(i==page){
			pages.innerHTML+="<li class='active'><a>" + i + "</a></li>";
		}else{
			pages.innerHTML+="<li><a onclick='selectPage("+i+")'>" + i + "</a></li>";
		}
	}
	if(page==total){
		pages.innerHTML+= "<li class='disenable'> <a aria-label='Next'><span aria-hidden='true'>&raquo;</span></a></li>";
	}else{
		pages.innerHTML+= "<li> <a aria-label='Next' onclick='nextPage("+page +")'><span aria-hidden='true'>&raquo;</span></a></li>";	
	}
	
}

하지만 매번 페이지 접속때마다 ajax로 서버에 request를 보내는것 보다 페이지의 개수가 달라졌다거나

한 페이지 당 출력해줄 글의 수가 변할때만 request를 보내고, 다른 경우에는 브라우저의 스토리지를 사용하는게 더 효율적입니다.

 

web storage에는 local storage와 session storage가 있습니다.

 

sessionStorage는 웹사이트에 연결되어있을때만 존재하는 스토리지인데요.

 

key와 value로 구성된 Hash의 구조를 갖습니다.

 

여기에 저장을 해두었다가 바뀐게 있을때만 request를 보냅니다.

 

전체 게시물의 페이지를 센 다음, HTML 태그 프로펄티인 innerHTML을 이용해

 

페이지들을 javascript로 만들어줍니다 ^_^

 

이때 selectPage(i)를 사용했는데요. 일단 이 함수에 대해선 밑에서 다루겠습니다.

 

Back-End

모든 게시물의 개수를 세기 위해 DB로 SQL을 보냅니다.

SELECT COUNT(*) FROM [테이블명]

그리고 이 값을 JSON을 이용해 FRONT로 전송해주면 끝!

@RequestMapping(value = "boardpage", method=RequestMethod.GET)
	public void totalPage(int limit,HttpServletResponse response) {
		String message;
		message = "{\"total\":\"" + dao.totalPage(limit) + "\"}";
		try {
			response.getWriter().print(message);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return ;
	}

Front

이제 화면으로 표시된 페이지 버튼을 클릭했을때 해당하는 게시물을 보여주는 기능을 만들어주어야 합니다~

 

저는 GET방식을 이용해 구현했습니다.

function selectPage(page){
	editGET('page',page);
}

function editGET(key,val){
	var url = window.location.href;
	if(url.indexOf('?')==-1){
		location.href = url+"?" + key + "="+val;
	}else if(url.indexOf(key+'=')==-1){
		location.href = url+"&"+key+"="+val;
	}else{
		var fragment= url.split(key+'=');
		if(fragment[1].indexOf('&')==-1){
			location.href = fragment[0] + key+'='+val;
		}else{
			var back = fragment[1].split('&');
			location.href = fragment[0]+key+'='+val+'&'+back[1];
		}
	}
}

서버측에 page변수를 전달하는 함수입니다.

 

이 변수를 받은 서버는 DB에 다음과 같은 SQL을 전송합니다.

 

SELECT
*
FROM [TABLE 명]
LIMIT [한 리스트에 출력될 게시물 수]
OFFSET [페이지 시작 번호]

LIMIT은 한번의 SQL 요청에 응답할 데이터의 수를 의미하는 SQL 키워드입니다.

 

https://strawberry-moon329.tistory.com/34

MYSQL) 게시판 꿀팁! LIMIT, OFFSET 키워드

자세한 내용은 위의 포스팅을 참조하시기 바랍니다.

 

서버에 PAGE와 LIMIT를 보내면 서버는 아래와 같은 연산을 해서 OFFSET과 LIMIT을 배정합니다.

 

LIMIT = LIMIT;

OFFSET = (PAGE-1)*LIMIT;

 

사용예시