본문 바로가기
Web/Javascript

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

by 나비와꽃기린 2016. 9. 6.


[가정 조건]

전체 데이터 수 : 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 ▶

 

댓글2

  • an 2017.04.25 16:36

    var goPaging_PagingView = function(cPage){

    이값을 어떻게 보내야하나요??

    일단 ajax 로 토탈 값을 갖구 왔고 페이징을 돌려야하는데 페이징이 미동도 없네요;;


    저 하단에 ajax로 처리를 다시해야하나요??


    검색 값도 보내야하는데

    페이지 넘버랑 페이지이동 처리 방법좀 설명 부탁드립니다..
    처음이라 잘모르겠네요
    출처: http://mkil.tistory.com/228 [나비와꽃기린]
    답글

    • 너무 늦게 답글을 다는것 같네요.
      페이징목록처리는
      http://mkil.tistory.com/330
      여기에 상세하게 적어놨으니 참고하시면 좋겠습니다