글 리스트 페이징 만들기 [다음10개]

글 리스트 페이징 만들기 [ 다음 10 개 ]

 

 

 

앞전 포스트에서 숫자를 구현했다. 1 2 3 ~ 4 5...

그 앞뒤로 간단하게 몇 줄정도 추가하여

[ 이전 10 개 ] 와 [ 다음 10 개 ] 를 만들자. 

 

 

우리가 구현했던 숫자부분이다

 

<%

   if(totalRecord !=0){
  
     for(int i=0; i< pagePerBlock; i++) { %>
     
     <a href = "List.jsp?nowBlock=<%=nowBlock%>&page=<%=(nowBlock * pagePerBlock)+ i %>">

     <%=(nowBlock * pagePerBlock) + i + 1 %></a>

 

<% if ((nowBlock * pagePerBlock) + i + 1 == totalPage){

          break;
       }
%>

<% }
}   %>

 

 

간략하게..

토탈레코드가 있으면 10을 한도로 돌기시작해서 1부터 10까지 출력이 되는데

클릭시마다 나우블럭과 페이지 변수가 넘어가고 토탈페이지에 의해 포 문은 제어된다.

 

 

 

먼저 [ 이전 10 개 ] !!

 

<%

   if(totalRecord !=0){
     if(nowBlock > 0) {

%>

<a href="List.jsp?nowBlock=<%=nowBlock - 1 %>&page=<%=((nowBlock-1) * pagePerBlock)%> ">이전 <%=pagePerBlock%>  개</a>

 <%
     for(int i=0; i< pagePerBlock; i++) { %>
     
for 문과 if 문 사이에 넣어주자.

 

 

     if(nowBlock > 0) {

 

나우블럭이 1개 이상 있어야 다음 10개가 실행되는데

한도치를 넘어서면 1이 증가하도록 나우블럭을 설계했었다.

 

 

<a href="List.jsp?nowBlock=<%=nowBlock - 1 %>&page=<%=((nowBlock-1) * pagePerBlock)%> ">이전 <%=pagePerBlock%>  개</a>

 

[ 이전 <%=pagePerBlock%> 개 ]  초기에 설정해놓은 10 들어가고

링크 클릭시 변수가 넘어가게 된다.

 

 

nowBlock = nowBlock -1

 

나우블럭은 -1로 넘어가서  1 2 3 ~ 9 10  숫자링크에 영향을 미친다.

 

나우블럭은 기본 0 이다. 이상태에서는 별 변화가 없겠지만

1 로 증가했을때 숫자링크들은  11 ~ 20 까지 보이게 되고 이전 열개를 클릭시

나우블럭에 -1 이 전해져 1 ~ 10 까지 보이게 된다. 

 

 

page = (( nowBlock-1) * pagePerBlock)

 

       nowBlock 이 1 일때   =                0            *      10        =         0

       nowBlock 이 2 일때   =                1            *      10        =        10

       nowBlock 이 3 일때   =                2            *      10        =        20

       nowBlock 이 4 일때   =                3            *      10        =        30

 

page 는 nowPage 로 변하여 beginPerPage 에 영향을 주고 시작점이 변경된다.

 

 

 beginPerPage = nowPage * numPerPage;

 

       page 가  0 일때   =                         0            *      10        =         0

       page 가 10 일때   =                        10           *      10        =        100

       page 가 20 일때   =                        20           *      10        =        200

       page 가 30 일때   =                        30           *      10        =        300

 

다음 10 개를 클릭시 100 번째 레코드가 보여지게 된다.

또 클릭시 200 번째 레코드가 보여지게 되는데 이전 10 개는 그 반대라는 의미

그럼 이전 10 개 완성되었다. 하지만 아직 페이지상에는 보이지 않는다.

 

 

[ 다음 10 개 ] 를 만들자.

 

<% if ((nowBlock * pagePerBlock) + i + 1 ==totalPage){
          break;
       }
    }

%>

<%   if (totalBlock > nowBlock + 1) { %>
<a href="List.jsp?nowBlock=<%=nowBlock + 1%>&page=<%=((nowBlock + 1) * pagePerBlock) %> ">다음 <%=pagePerBlock%> 개</a>

<%  } 
}
%>

위와 같은 위치에 [ 다음 10 개 ] 소스를 살찍 넣어주자.

 

 

<%   if (totalBlock > nowBlock + 1) { %>

 

만일 토탈블럭 이 나우블럭에 1을 더한 값보다 크다면 실행하라.

토탈블럭 값을 구하자.

 

 

 totalBlock=(int)Math.ceil((double)totalPage / pagePerBlock);

 

레코드가   15 개 있을때                    2         /         10        =     1

 

totalPage =   (totalRecord/numPerPage) 

 

레코드가   99 개 있을때                   10         /         10        =     1

레코드가 100 개 있을때                    10         /         10        =     1

레코드가 101 개 있을때                    11         /         10        =     2

레코드가 125 개 있을때                    13         /         10        =     2

 

총 레코드가 101 가 넘어가는 순간부터 2 로 증가하므로

[ 다음 10 개 ] 가 나오는 if 문이 성립된다.

 

다음 <%=pagePerBlock%> 개 가운데에 10 이 찍히겠고

링크를 클릭하는 순간 변수를 넘기자.

 

 

nowBlock = nowBlock + 1

 

나우블럭은 +1로 넘어가서  1 2 3 ~ 9 10  숫자링크에 영향을 미친다.

나우블럭은 기본 0 이다. 이상태에서는 별 변화가 없겠지만

[ 다음 10 개 ]를 클릭시 나우블럭에 + 1 추가되어 11 ~ 20 이 보이게 된다. 

 

 

page = (( nowBlock + 1) * pagePerBlock )

 

위와 마찬가지로

page 는 nowPage 로 변하여 beginPerPage 에 영향을 주고 시작점이 변경된다.

 

1을 넘겼을 경우 100 번째 레코드가 보이게 되고

2를 넘겼을 경우 200 번째 레코드가 보이면서

 

1~10  과 11 ~ 20 그리고 21 ~ 30 까지의 관계가 성립된다.

 

어려웠지만 쭈욱 늘어놓아보니 그다지 어렵지도 않다.

 

 

대충 리스트 페이지의 구색을 갖추었다.

멋진 디자인을 가미하여 나만의 게시판을 만들어 봅시다.

 

 

다음 포스트에서는 글 보기 페이지 연결을 알아보자.

 

 

 

 

완성 소스 !

 

--------------------------------------------------------------------------------

<%@ page contentType="text/html; charset=EUC-KR" %>
<%@ page import="member.*,java.util.*"%>
<jsp:useBean id="Bo" class="member.BoMgr"/>

<%
  request.setCharacterEncoding("euc-kr");
%>

<%
   int totalRecord=0;
   int numPerPage=10;
   int pagePerBlock=10;
   int totalPage=0;
   int totalBlock=0;
   int nowPage=0;
   int nowBlock=0;
   int beginPerPage=0;
 
   Vector boList;

%>

<%

 boList = Bo.getBoList();

 totalRecord = boList.size();

 if (request.getParameter("page") != null) {
     nowPage = Integer.parseInt(request.getParameter("page"));
 }

 beginPerPage = nowPage * numPerPage;

 totalPage = (int)Math.ceil((double)totalRecord / numPerPage);

 if (request.getParameter("nowBlock") != null) {
     nowBlock = Integer.parseInt(request.getParameter("nowBlock"));
 }

 totalBlock=(int)Math.ceil((double)totalPage / pagePerBlock);

%>

<html>
<head><title>JSPBoard</title>
</head>

<body topmargin=0>

<jsp:include page="../sub/top.jsp" flush="true">
  <jsp:param name="title" value="제목" />
</jsp:include>

<table align=center width="780" border=1 cellspacing=0 cellpadding=0>
 <tr>
  <td align=center height=50 colspan=2>JSP 강좌</td>
 </tr>
 <tr>
  <td width=180>dd</td>
  <td align=center valign=top height=350>
   <table border=1 width=600  cellpadding=0 cellspacing=0>
    <tr align=center bgcolor=#D0D0D0 height=0>
     <td width=50>번 호</td>
     <td width=350>제 목</td>
     <td width=70>이 름</td>
     <td width=50>조 회</td>
     <td width=80>작성일</td>
    </tr>

<% 
  for (int i=beginPerPage; i<(beginPerPage+numPerPage); i++){
   if (i==totalRecord){break;}

BoBean ListBo = (BoBean)boList.elementAt(i);

String title = ListBo.getTitle();
%>
    <tr>
     <td></td>
     <td><%=title%></td>
     <td>3.6</td>
    </tr>
<%
  }
%>
   </table>
  </td>
 </tr>
 <tr>
  <td></td>
  <td align=center>

<%
   if(totalRecord !=0){
     if(nowBlock > 0) { 
%>
<a href="List.jsp?nowBlock=<%=nowBlock - 1 %>&page=<%=((nowBlock-1) * pagePerBlock)%> ">이전 <%=pagePerBlock%>  개</a>
<%   }  
     for(int i=0; i< pagePerBlock; i++) { %>
     
     <a href = "List.jsp?nowBlock=<%=nowBlock%>&page=<%=(nowBlock * pagePerBlock)+ i %>">
     <%=(nowBlock * pagePerBlock) + i + 1 %></a>

<% if ((nowBlock * pagePerBlock) + i + 1 ==totalPage){
          break;
       }
    }
%>

<%   if (totalBlock > nowBlock + 1) { %>
<a href="List.jsp?nowBlock=<%=nowBlock + 1%>&page=<%=((nowBlock + 1) * pagePerBlock) %> ">다음 <%=pagePerBlock%> 개</a>

<%  } 
}
%>

  </td>
 </tr>
</table>
</body>
</html>
------------------------------------------------------------------------------

출처 : http://blog.daum.net/haha25/5386883