Web/JSP

[JSP] 페이징 처리 (Pagination)

웹코린이 2023. 7. 11. 14:28
728x90

 

 

 

페이지네이션

대량의 데이터를 여러 페이지로 나누어 표시하는 디자인 패턴

 

 

 

 

페이지네이션의 특징

  1. 사용자 경험 개선
    • 사용자가 너무 많은 데이터를 한 번에 처리할 필요가 없어지므로 웹 페이지의 응답성과 성능을 향상시킬 수 있음
    • 또한 사용자는 페이지 이동을 통해 원하는 데이터를 쉽게 찾을 수 있음
  2. 쉬운 탐색
    • 사용자가 데이터를 페이지 단위로 탐색할 수 있음
    • 이전 페이지, 다음 페이지, 특정 페이지로 이동하는 기능을 제공함
  3. 검색 결과 페이지
    • 검색 결과를 여러 페이지로 나누어 제공하여 사용자가 검색 결과를 더 효과적으로 관리하고 탐색할 수 있음
  4. 정렬과 필터링
    • 정렬과 필터링을 적용하여 사용자가 데이터를 원하는 방식으로 조작할 수 있음

 

 

 

페이지네이션 구성 요소

  1. 현재 페이지 번호: 사용자가 보고 있는 페이지의 번호를 나타냄
  2. 총 페이지 수 : 데이터를 전체 페이지로 얼마나 나누어 표시할 것인지를 나타냄
  3. 이전 페이지 및 다음 페이지 링크 : 이전 페이지와 다음 페이지로 이동할 수 있는 링크 또는 버튼
  4. 특정 페이지로 이동: 사용자가 특정 페이지로 이동할 수 있는 페이지 번호 링크 또는 입력 필드

 

 

 

 

실습

 

MainController.java

public class MainAction implements Action {
 
	@Override
	public ActionForward execute(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		ActionForward forward = new ActionForward();
		forward.setPath("main.jsp");
		forward.setRedirect(false);
		
		String count=request.getParameter("count");
		if(count == null || count.isEmpty() || count.isBlank() || count.equals("")) {
			count="2";
		}
		int cnt=Integer.parseInt(count);
		
		BoardSetDAO bsDAO=new BoardSetDAO();
		ArrayList<BoardSet> datas=bsDAO.selectAll(null, cnt);
		request.setAttribute("datas", datas);
		request.setAttribute("count", cnt);
		
		return forward;
	}
}

 

 

 

 

BoardSetDAO.java

public class BoardSetDAO {
	private Connection conn;
	private PreparedStatement pstmt;
	private ResultSet rs;
	
	static final private String SQL_SELECTALL="SELECT * FROM BOARD ORDER BY BID DESC LIMIT 0,?";
	static final private String SQL_SELECTALL_REPLY="SELECT * FROM REPLY WHERE BID=? ORDER BY RID DESC";
	
	public ArrayList<BoardSet> selectAll(BoardVO bVO,int count){
		conn=JDBCUtil.connect();
		ArrayList<BoardSet> datas=new ArrayList<BoardSet>();
 
		try {
			pstmt=conn.prepareStatement(SQL_SELECTALL);
			pstmt.setInt(1, count);
			rs=pstmt.executeQuery();
 
			while(rs.next()) {
				BoardSet bs=new BoardSet();
				
				BoardVO data=new BoardVO();
				data.setBid(rs.getInt("BID"));
				data.setBcontent(rs.getString("BCONTENT"));
				data.setMid(rs.getString("MID"));
				data.setFavCnt(rs.getInt("FAVCNT"));
				
				bs.setBoard(data);
				
				pstmt=conn.prepareStatement(SQL_SELECTALL_REPLY);
				pstmt.setInt(1, data.getBid());
				ResultSet rs2=pstmt.executeQuery();
				ArrayList<ReplyVO> rdatas=new ArrayList<ReplyVO>();
				while(rs2.next()) {
					ReplyVO rVO=new ReplyVO();
					rVO.setBid(rs2.getInt("BID"));
					rVO.setDate(rs2.getDate("DATE"));
					rVO.setMid(rs2.getString("MID"));
					rVO.setRid(rs2.getInt("RID"));
					rVO.setRcontent(rs2.getString("RCONTENT"));
					rdatas.add(rVO);
				}
				
				bs.setRdatas(rdatas);
				datas.add(bs);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
 
		JDBCUtil.disconnect(rs, pstmt, conn);
		return datas;
	}
}

 

 

 

 

Main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="kim" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메인 페이지</title>
</head>
<body>
 
<script type="text/javascript">
	function signup(){
		window.open("signup.jsp","회원가입 창","width=450,height=300");
	}
</script>
 
<div id="header">
	<h1>SNS 커뮤니티 실습 프로젝트</h1>
</div>
 
<div id="gnb">
	<ul>
		<li><a href="main.do">메인으로 가기</a></li>
		<kim:login />
	</ul>
</div>
 
<div id="content">
	<section>
		<kim:write type="board" />
	</section>
	<hr>
	<section>
		<c:forEach var="v" items="${datas}">
			<c:set var="board" value="${v.board}" />
			<c:set var="rdatas" value="${v.rdatas}" />
			${board.bid} ${board.bcontent} | <a href="fav.do?bid=${board.bid}">♥</a>[${board.favCnt}] <br>
			<c:forEach var="r" items="${rdatas}">
				${r.rid} ${r.rcontent} <br>
			</c:forEach>
			<kim:write type="reply" bid="${board.bid}" />
			<hr>
		</c:forEach>
		
		<a href="main.do?count=${count+2}">[더보기]</a>
		<!-- 페이지네이션 -->
	</section>
</div>
 
<div id="footer">
	<h3>&copy; NAVER corp. | 회사소개 | 이용약관 | 개인정보처리방침 | 고객센터</h3>
</div>
 
</body>
</html>

 

 

 

 

728x90