스프링 게시판 - 페이징(paging) 처리하기 (1)

웹 페이지에 게시판을 만들면서 필요한 페이징 처리를 해보았다.
여러가지 페이징 처리가 있지만 처음 페이징를 만들어보면서 정리해보았다.
JAVA 8, Eclipse, mysql을 사용하였다.

 

 

페이징 처리하기 

1. jsp  

→ 페이징이 그려질 공간 추가 

 

2. JS 

→ 페이징 처리 관련 코드를 js 에 넣어두었다.

 

2-1. myBoard.js

function MyBoard() {	
  this.getList = function(pageNo){
    var mainParams = new Object();
      	mainParams.pageNo = pageNo;
      	mainParams.pagesize = dataPerPage;

	// po 객체 생성
    var po = []; 
    // po 객체에 mainParams 객체를 jsonString 형식으로 담기
    po.push("mainParams=" + encodeURIComponent(common.jsonString(mainParams))); 

    common.getObjectList("/getMyBoardList.ajax", "POST", po.join("&"), function(responseData) {
    	
        // 응답 받은 데이터를 parseJSON으로 변환하여 resultDatas에 담음
        var resultDatas = jQuery.parseJSON(responseData);


    	var $pingingView = $("#consulting_paging"); 
    	$pingingView.empty();

    	var paging = common.paging(resultDatas.totalCnt, dataPerPage, pageCount, pageNo, "myBoard.getList");			
    	$pingingView.html(paging);

    });
  }
}

 → pageNo : 페이지 번호

 → pageSize , dataPerPage : 한 페이지에 나타낼 데이터 수  

 → resultDatas.totalCnt : 게시물 총 개수

 → pageCount : 한 페이지에 나타낼 페이지 수

프로젝트를 하면서 페이징 처리하는 내용은 여러곳에서 사용하기 때문에 공통으로 사용하는 js에 빼놓음

 

2-2. common.js

function Common() {

 this.paging = function(totalData, dataPerPage, pageCount, currentPage, func){
  var totalPage = Math.ceil(totalData/dataPerPage);    // 총 페이지 수
  var pageGroup = Math.ceil(currentPage/pageCount);    // 페이지 그룹

  var last = pageGroup * pageCount;    // 화면에 보여질 마지막 페이지 번호
  if(last > totalPage){
  	last = totalPage;
  }
  
  var first = last - (pageCount-1);    // 화면에 보여질 첫번째 페이지 번호
  var next = last+1;
  var prev = first-1;        

  if(totalPage < 1){
    first = last;
  }

  var html = "";
  if(prev > 0){
    html += '<a href="javascript:;" onclick="'+func+'('+prev+');" id="prev" class="btn-prev"></a>';
  }

  for(var i= first ; i <= last; i++){ 
    if(i>0){
      if(last == i){
        html += '<a href="javascript:;" onclick="'+func+'('+i+');"   id="' + i + '" pagenumber="'+i+'">' + i + '</a>'; 
      }else{
        html += '<a href="javascript:;" onclick="'+func+'('+i+');"   id="' + i + '" pagenumber="'+i+'">' + i + '</a>';   
      }
    }
  }

  if(last < totalPage){
    html += '<a onclick="'+func+'('+next+');" id="next" class="btn-next"></a>';	
  }

  return html;
  }
}

 → Math.ceil() : 소수점 이하를 올림

 → totalPage = Math.ceil(totalData/dataPerPage)

      : totaldata이 6개, dataPerPage는 5 이고 소수점 올림하여 totalPage 는 2

 →  pageGroup = Math.ceil(currentPage/pageCount) 

      : currentPage 이 첫페이지이므로 1, pageCount는 5이고 소수점 이하 올림하여 pageGroup은 1 

 →   next : 다음, prev : 이전

 

 

☞ 게시판 페이징(paging) 처리하기 (2)