[Javascript] 페이징(paging) 공통 UI 소스 /페이징 화면 소스/페이징 자바스크립트 / paging ui

[가정 조건]

전체 데이터 수 : 27개

페이지당 보여줄 데이터 수 : 10개

페이지 그룹 범위 : 10 (1~10, 11~20 ,21~30…..)

현재페이지 번호 : 1

token명 : 편의 지정하시길

해당 소스는 test 소스이다. 실제 사용시에는 Server단에서 totalCnt수를 구하여 사용하셔야 합니다.

(1) Paging 함수 호출

보통 필자는 ajax를 통해 가져온 data를 success부분에서다음과 같이 Paging 함수를

호출하여 paging을 그립니다. 

그리고 앞선 포스팅에 있는 Server단을 사용하시기 위해서는 countPerPage와 pageNo이라는 변수를 서버단으로 보내줘야 합니다. (http://mkil.tistory.com/227)

따라서 필자는 보통 아래와 같이 사용합니다.

,getBoardList : function(no){

	var pageNo = (no || 1);
	
	$.ajax({
		type:"GET",
		url: '/spring/boardList',
		dataType: "json",
		data : "countPerPage="+10+"&pageNo="+pageNo,
		contentType:"application/json; charset=UTF-8",
		cache 	: false,
		success : function(resData){

지금은 test 예제이니 document가 load될때 데이터를 27개 가져왔다고 가정하고

paging함수를 호출해 보겠습니다.

이때 가장 마지막 파라미터인 token명은 원하는 명으로 지정해 주셔도 되고,

token명으로 되는 함수가 하나 더 추가 될 것이기 때문에 잘 기억해 주시길 바랍니다.

$(document).ready(function(){
           //Paging(전체데이타수,페이지당 보여줄 데이타수,페이지 그룹 범위,현재페이지 번호,token명)
           var page_viewList = Paging(27, 10, 10 ,1, "PagingView");
 
           $("#test").empty().html(page_viewList);
});

(2) Paging function

보통 Paging 함수는 별도의 js 파일을 만들어 관리하여 주심이 좋습니다.

페이징은 공통적으로 사용하는 함수로 사용될 가능성이 크기 때문이죠.

아래 Paging소스는 전달받은 파라미터를 가지고 page UI를 그려주게 됩니다.

// 목록 페이징
Paging = function(totalCnt, dataSize, pageSize, pageNo, token){
   totalCnt = parseInt(totalCnt);// 전체레코드수
   dataSize = parseInt(dataSize);       // 페이지당 보여줄 데이타수
   pageSize = parseInt(pageSize);     // 페이지 그룹 범위       1 2 3 5 6 7 8 9 10
   pageNo = parseInt(pageNo);        // 현재페이지
  
   var  html = new Array();
   if(totalCnt == 0){
			  return "";
   }
  
   // 페이지 카운트
   var pageCnt = totalCnt % dataSize;         
   if(pageCnt == 0){
			  pageCnt = parseInt(totalCnt / dataSize);
   }else{
			  pageCnt = parseInt(totalCnt / dataSize) + 1;
   }
  
   var pRCnt = parseInt(pageNo / pageSize);
   if(pageNo % pageSize == 0){
			  pRCnt = parseInt(pageNo / pageSize) - 1;
   }
  
   //이전 화살표
   if(pageNo > pageSize){
			  var s2;
			  if(pageNo % pageSize == 0){
						  s2 = pageNo - pageSize;
			  }else{
						  s2 = pageNo - pageNo % pageSize;
			  }
			  html.push('<a href=javascript:goPaging_' + token + '("');
			  html.push(s2);
			  html.push('");>');
			  html.push('◀');
			  html.push("</a>");
   }else{
			  html.push('<a href="#">\n');
			  html.push('◀');
			  html.push('</a>');
   }
  
   //paging Bar
   for(var index=pRCnt * pageSize + 1;index<(pRCnt + 1)*pageSize + 1;index++){
			  if(index == pageNo){
						  html.push('<strong>');
						  html.push(index);
						  html.push('</strong>');
			  }else{
						  html.push('<a href=javascript:goPaging_' + token + '("');
						  html.push(index);
						  html.push('");>');
						  html.push(index);
						  html.push('</a>');
			  }
			  if(index == pageCnt){
						  break;
			  }else html.push('|');
   }
	
   //다음 화살표
   if(pageCnt > (pRCnt + 1) * pageSize){
			  html.push('<a href=javascript:goPaging_' + token + '("');
			  html.push((pRCnt + 1)*pageSize+1);
			  html.push('");>');
			  html.push('▶');
			  html.push('</a>');
   }else{
			  html.push('<a href="#">');
			  html.push('▶');
			  html.push('</a>');
   }

   return html.join("");
}

(3) token 명을 가진 함수 생성

var goPaging_PagingView = function(cPage){
	게시물을 가져오는 함수에 cPage값을 보내서 사용하세요.cPage는 현재 사용자가 클릭한 페이지값을 의미합니다.
};	

[결과] 

◀ 1 | 2 | 3 ▶