오늘은 JSP에서 테이블 내용을 페이징 처리 하는 방법에 대해 연습해 보았다.



코드는 Color Scripter에서 잘라서 붙이려니, 페이지 내에 문제가 생겨서 통째로 밑에 올리고


위에서는 설명만 적도록 했다.


먼저, 테이블의 내용은 JAVA 클래스를 따로 만들어 메소드를 호출하여 ArrayList에 담아서 불러 오도록 하였다.


메소드 호출하는데 사용한 주요한 변수 2가지는.


1. 현재 페이지의 번호.


2. 페이지당 보여줄 행의 갯수.


로 정했다.


현재 페이지의 번호 currentPage 는 상수 1로 고정하였지만, [다음] 버튼을 누를 시에는 페이지 번호 값이 담긴 파라미터가 넘어 오므로,


그에 해당하는 페이지 번호로 변경 되게 하였다.


페이지당 보여줄 행의 갯수는, pagePerRow 자유롭게 선택해서 정하면 된다.


전체 행의 갯수 rowNumber는 역시 메소드를 따로 만들어 호출해서 값을 받아내어 변수에 담아서 사용하도록 하였다.



페이징 시에 보여줄 버튼은



이런 형태를 가지게 된다.



이전, 다음 버튼부터 설명 하자면,


이전 버튼은 현재 페이지의 번호가 1보다 클 때만 나타나도록 하였다.


다음 버튼은 현재 페이지의 번호가 마지막 페이지의 번호(총 페이지의 갯수 lastPage) 보다 작을 때만 나타나도록 하였다.



1,2,3,4,5...의 넘버링은


for문을 활용하는 것이 좋을 것 같다고 생각하였다.


다만, 페이지가 너무 많아지면 끝도 없이 (ex) 1000,1001,...) 넘버링이 길어지는 문제가 생기는데,


이 부분에 대한 해결책은 더 고민해보아야 할 것 같다.


페이징 하는데 이용한 계산식은,


총 페이지의 갯수  lastPage = (( 모든 행의 갯수 rowNumber - 1) / 페이지당 보여줄 행의 갯수 pagePerRow) + 1 ;


를 이용하여  계산 하였다.


<!-- 2018-07-11 이광재 -->
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%@ page import = "service.EmployeeDao"%>
<%@ page import = "service.Employee" %>
<%@ page import = "java.util.ArrayList"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
		<title>EmployeeList</title>
		<style>
			.zui-table {
			    border: solid 1px #DDEEEE;
			    border-collapse: collapse;
			    border-spacing: 0;
			    font: normal 13px Arial, sans-serif;
			}
			.zui-table thead th {
			    background-color: #DDEFEF;
			    border: solid 1px #DDEEEE;
			    color: #336B6B;
			    padding: 10px;
			    text-align: left;
			    text-shadow: 1px 1px 1px #fff;
			}
			.zui-table tbody td {
			    border: solid 1px #DDEEEE;
			    color: #333;
			    padding: 10px;
			    text-shadow: 1px 1px 1px #fff;
			}
		</style>
	</head>
	<body>
		<h3>직원 명부</h3>
		<table class="zui-table">
			<tr>
				<th>no</th>
				<th>name</th>
				<th>age</th>
				<th>주소입력</th>
				<th>점수보기</th>
				<th>삭제</th>
				<th>수정</th>
			</tr>
		<%
	        
			int currentPage = 1;
			if(request.getParameter("currentPage") != null) { 
				currentPage = Integer.parseInt(request.getParameter("currentPage")); // String 타입으로 넘어온 "currentPage" 변수의 타입을 int로 변환하여 저장한다.
			}    
 
			int pagePerRow = 5;
			
			EmployeeDao employeeDao = new EmployeeDao();
			ArrayList<Employee> list = employeeDao.selectEmployeeByPage(currentPage, pagePerRow);
			System.out.println(list + " : 01 list check");
			
			int rowNumber = employeeDao.selectRowNumber();
			
			
			for(int i=0; i<list.size(); i++) {
				
		%>
				<tr>
					<td><%=list.get(i).getEmployeeNo()%></td>
					<td><a href="./EmployeeAddrList.jsp?no=<%=list.get(i).getEmployeeNo()%>"><%=list.get(i).getEmployeeName()%></a></td>
					<td><%=list.get(i).getEmployeeAge()%></td>
					<td><a href="./InsertEmployeeAddrForm.jsp?no=<%=list.get(i).getEmployeeNo()%>">주소입력</a></td>
					<td><a href="./EmployeeAndScore.jsp?employeeNo=<%=list.get(i).getEmployeeNo() %>">점수보기</a></td>
					<td><a href="./DeleteEmployeeAction.jsp?no=<%=list.get(i).getEmployeeNo()%>">삭제</a></td>
					<td><a href="./UpdateEmployeeForm.jsp?no=<%=list.get(i).getEmployeeNo()%>">수정</a></td>
				</tr>
		<%
			}
		%>
		</table>
		<%
			if(currentPage>1) { //currentPage 값이 1보다 클때만 실행
		%>
			<a href="./EmployeeList.jsp?currentPage=<%=currentPage-1%>">이전</a> <!-- 이전 페이지 버튼 클릭시 "currentPage"변수로 currentPage-1의 값을 전송 --> 
		<%
			}
			/*	마지막 페이지의 번호 구하기(페이지의 총 갯수는 총 행의 갯수 -1에서 페이지당 보여줄 행의 수를 나눈 몫에다가 1을 더한다.)
				예) (총 행 갯수 (25 - 1) / 페이지당 보여줄 행의수 5 = 5) +1 = 마지막 페이지의 번호는 5 --> 행 갯수와 PPR이 딱 나누어 떨어질 때
				예) (총 행 갯수 (27 - 1) / 페이지당 보여줄 행의수 5 = 5) +1 = 마지막 페이지의 번호는 6 --> 행 갯수와 PPR이 딱 나누어 떨어지지 않을 때
			*/
			int lastPage = ((rowNumber - 1) / pagePerRow) + 1 ;
			System.out.println(rowNumber + " : rowNumber called");
			System.out.println(pagePerRow + " : pagePerRow called");
			System.out.println(lastPage + " : lastPage called");
			
			/*	if ((employee.getRowNumber()-1) % pagePerRow !=0) { // rowNumber-1의 값과 페이지당 행의 수와의 나머지가 1이 아닐때
					lastPage++;
				}
 			*/
			int pageNum = 0;
 			
 			for(int i=1; i<=lastPage; i++) {
				
		%>
				<a href="./EmployeeList.jsp?currentPage=<%=i%>">[<%=i%>]</a>
		<%
 			}
 			
			if(currentPage<lastPage) { /* 현재 페이지 넘버가 마지막 페이지 넘버보다 작아졌을때만 실행. */
		%>
				<a href="./EmployeeList.jsp?currentPage=<%=currentPage+1%>">다음</a> <!-- 다음 페이지 버튼 클릭시 "currentPage"변수로 currentPage+1의 값을 전송 -->
		<%
			} 
		%>
		<br><br>
		<a href = "./index.jsp">메인화면으로..</a>
	</body>
</html>


'프로그래밍 > JSP' 카테고리의 다른 글

JSP에서 한글 깨질때 참조.  (0) 2018.07.12
JSP DTO,DAO를 활용한 로그인 세션 처리  (0) 2018.06.29
JSP로 게시판 글에 댓글 기능 넣어보기.  (1) 2018.06.19
로그인 페이지 작성 및 DB 연결 후 로그인 시도  (0) 2018.05.30
getRequestURL(),getRequestURI()  (0) 2018.05.24

+ Recent posts

티스토리툴바