데이터 페이징 처리

페이지마다 해당하는 데이터들만 가져오는 페이징 처리를 정리할 것임

기본적으로 학원에서 다 배우는 거긴 한데 그 땐 모든 값을 컨트롤러에서 계산하고 뷰로 넘겨줬다면

이번에는 page 변수 랑 총 데이터 개수 두개만 넘겨줄 것이기 때문에... 여기서 생각 못했던 오류를 하나 처리해서 이참에 정리!

 

 

1. jsp 페이지 로딩 시 ajax로 데이터 가져올 것임

1-1. View

var dataset; $(function(){    $.ajax({        url: "./list.do",   //리스트 가져오는 컨트롤러로       type: "get",       cache: "false",       datatype: "json",       data: {"page": "${page}"},   //페이지 정보를 넘겨줌       success: function(data) {   //json 형태로 data를 받아옴          dataset=grid.data.parse(data);    //dhtmlx grid에 맞게 데이터 파싱해줌       }    }); });

1-2. Model (Service)

public String mlist(int page) throws Exception {    ObjectMapper mapper=new ObjectMapper();    mapper.setDateFormat(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"));    //저번처럼 날짜 포맷 지정해주고    List<memberDTO> dto=dao.mlist(page);   //page에 해당하는 리스트 가져와서    return mapper.writeValueAsString(dto);   //json 형태로 만들어 리턴해줌 }

1-3. mapper (Mybatis) : 각자 데이터베이스에 맞춰 쿼리 짜서 가져오기

<select id="list" parameterType="int" resultType="경로~.DTO">    select * from (select row_number() over(), user_table.* from user_table) x    where row_number between ((#{page}-1)*10+1) and ((#{page}-1)*10+10)   //페이지만큼의 데이터만 뽑아오기 (난 10개!) </select>

 

2. 페이징 처리

문제

int pageCount = cnt / 10 + ((cnt % 10 == 0) ? 0 : 1); int startPage = ((page - 1) / 10) * 10 + 1;  int endPage = startPage + 10 - 1;  if (endPage > pageCount)    endPage = pageCount;

javascript에서 대충 변수를 이런 식으로 정의하고 출력하니

1~10페이지는 1~10까지 출력, 11~20페이지는 11~20이 출력되어야 하는데 2페이지 클릭시 2~11, 3페이지 클릭시 3~12가 출력됨

 

그래서 일단 startPage 값을 찍어봤지

1.0 2.0 3.0으로 출력됨

즉, 뷰에서 페이지를 계산할 경우, 결과가 실수형으로 출력되는 것임

 

원인

Model 객체로 뷰에 값을 내보낼 경우 그 값은 object형 ---> 계산 시 정수형으로 고정되지 않았던 거지

 

해결

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 

<fmt:parseNumber var="pg" value="${((page-1)/10) }" integerOnly="true"/>    //연산을 정수형으로 해서 pg에 저장하겠다고 선언! <c:set var="pageCount" value="${cnt/10+((cnt%10==0)? 0:1) }"/>    //총 몇 페이지인지 <c:set var="spage" value="${pg*10+1}"/>   //정수로 계산한 나머지 연산 추가해서 sPage, ePage 변수 선언해줌 <c:set var="epage" value="${pg*10+10}"/>  // *10을 pg에 포함 안 시킨 이유... /10 이랑 곱해져서 (page-1)만 남기게 됨; <c:if test="${epage>pageCount }">    //10페이지씩 아래 뜨게 만들건데 끝페이지가 총 페이지보다 크다면?    <c:set var="epage" value="${pageCount }"/>   //총 페이지까지만 뜨게 만들어야지 ㅇㅇ </c:if>

 

3. 하단 페이지 번호 만들기

<c:if test="${spage!=1 }">    <div><a href="javascript:;" onclick="pagin(${spage-1})"> << </a></div> </c:if> //// 앞 10 페이지로 넘어갈 수 있는 태그 <c:forEach begin="${spage }" end="${epage }" var="i">     <div><a href="javascript:;" onclick="pagin(${i})" <c:if test="${page==i }"> style="font-weight:bolder"</c:if> >${i }</a></div> </c:forEach> //// 10 단위로 번호 매김 (해당 페이지의 번호는 볼드 처리) <c:if test="${epage!=pageCount }">    <div><a href="javascript:;" onclick="pagin(${epage+1})"> >> </a></div> </c:if> //// 뒤 10페이지로 넘어갈 수 있는 태그

function pagin(value){     //페이지값 매개변수로    location.href="./main.do?page="+value;    //넘겨주기 }

 

결과

 

데이터 10개씩 페이징 처리 완