게시판 만들기 - 페이징 기능 구현

 

 

게시글 수가 많아지면 스크롤을 계속 내려야 함

그래서 한 페이지에 10개 또는 20개 , 등 개수를 정하여 보여줄 수 있음. 

 

테스트를 위해 sql를 수정해 봄

 

INSERT INTO tbl_board(title, content, writer)
SELECT title,content,writer
FROM tbl_board;

기존에 있던 내용들을 한 번 더 넣는다. 

 

여러 번 하면 개수가 많아짐 

 

 

 

아래와 같이 스크롤이 끝도 없어짐...ㅋㅋ

 

 

 

기존의 게시글 조회를 수정한다.

	<!-- 게시글 목록 조회(10개) 최신순 -->
	<select id="list" resultType="com.board.domain.BoardVO">
		SELECT bno, title, content, writer,
		regDate, viewCnt
		FROM tbl_board
		ORDER BY bno desc
		limit 10;
	</select>

테스트하기 

최신 글 10개만 출력됨을 확인 가능하다. 

 

 

 

limit 0, 10 으로 수정하면, 결과중 0번째를 시작으로 10개가 출력됨.

 

select 
  bno, title, writer, regDate, viewCnt
from tbl_board
order by bno desc
limit 0, 10

 

만약 2페이지 

select 
  bno, title, writer, regDate, viewCnt
from tbl_board
order by bno desc
limit 10, 10

 

 

 

위의 SQL문을 이용해서 페이징을 해볼거임

 

boardMapper.xml

	<!-- 게시물 총 갯수  -->
	<select id="count" resultType="int">
	SELECT COUNT(bno)
	FROM tbl_board
	</select>

 

 

BoardDAO

	//게시글 총 갯수
	public int count() throws Exception;

입력은 없고 리턴은 정수타입

BoardDAOImple

	//게시글 전체 갯수 
	@Override
	public int count() throws Exception {
		return sqlTemplate.selectOne("board.count");
	}

 

 

BoardService

	//게시글 총 갯수
	public int count() throws Exception;

 

 

 

BoardServiceImple

	//게시글 전체 갯수 
	@Override
	public int count() throws Exception {
		return boardDAO.count();
	}

 

 

Mapper 수정

아까 최신순 10개 출렸했던 sql은 

limit 지우고 최신순으로만 조회하는걸로 수정함

	<!-- 게시글 목록 조회 최신순 -->
	<select id="list" resultType="com.board.domain.BoardVO">
		SELECT bno, title, content, writer,
		regDate, viewCnt
		FROM tbl_board
		ORDER BY bno desc
	</select>

 

 

그리고 그 아래에 페이징 sql쿼리문 하나 더 추가함

	<!-- 게시글 목록 + 페이징-->
	<select id="listPage"  parameterType="hashMap" resultType="com.board.domain.BoardVO">
		SELECT bno, title, content, writer, regDate, viewCnt
		FROM tbl_board
		ORDER BY bno desc
		limit #{displayPost}, #{postNum};
	</select>

postNum = 한 페이지에 몇 개 표시할건지

 

 

BoardDAO

	//게시글 목록 + 페이징
	public List<BoardVO> listPage(int displayPost, int postNum) throws Exception;

BoardDAOImple

	//게시글 목록 + 페이징
	@Override
	public List<BoardVO> listPage(int displayPost, int postNum) throws Exception {
		
		HashMap<String, Object> data = new HashMap<>();
		
		data.put("displayPost", displayPost);
		data.put("postNum", postNum);
		
		return sqlTemplate.selectList("board.listPage",data );
	}

 

 

BoardService

	//게시글 목록 + 페이징
	public List<BoardVO> listPage(int displayPost, int postNum) throws Exception;

 

 

 

BoardServiceImple

	
	//게시글 목록 + 페이징
	@Override
	public List<BoardVO> listPage(int displayPost, int postNum) throws Exception {
	
		return boardDAO.listPage(displayPost, postNum);
	}

 

 

BoardController

	// 게시물 목록 + 페이징 추가 
	@GetMapping("/listPage")
	public void getListPage(@RequestParam("num") int num, Model model) throws Exception {

		//게시물 총 갯수
		int count = boardService.count();
		
		//한 페이지에 출력할 게시글 갯수
		int postNum = 10;
		
		//하단 페이징 번호([ 게시글 총 갯수 / 한 페이지에 출력할 갯수])의 반올림)
		int pageNum = (int)Math.ceil((double)count/postNum);
		
		//출력할 게시글 
		int displayPost = (num - 1) * postNum;
		
		
		List<BoardVO> list = null;
		list = boardService.listPage(displayPost, postNum);
		model.addAttribute("list", list); //현재 num 페이지의 게시글 데이터
		model.addAttribute("pageNum", pageNum); //총 페이지 숫자
	}

 

 

매개변수로 num은 페이지 번호

1. 게시물의 총 갯수를 구하고

2. 한 페이지당 출력할 게시물 갯수를 정하고(10개)

3. 하단에 표시할 페이징 번호의 갯수를 구하고(소수점은 올림)

4. 현재 페이지를 기준으로 10개의 데이터를 출력합니다

하지만 지금은 listPage에 매칭되는 jsp파일이 없으니 생성해야합니다.

 

https://blog.naver.com/drv982/223219418341

[페이징] 구현하기

 

 

 

 

list.jsp를 복사해서 listPage.jsp를 생성한다. 

 

 

 

 

 

table이 끝나는 다음 줄에 반복문 추가- 페이지네이션 

<div>
 <c:forEach begin="1" end="${pageNum}" var="num">
    <span>
     <a href="/board/listPage?num=${num}">${num}</a>
  </span>
 </c:forEach>
</div>

반복문 

1부터 pageNum까지 반복한다.

 

 

 

 

 

 

 
 <li>
 <a href="/board/listPage?num=1">글 목록(페이징)</a> 
</li>

 

링크를 클릭하면 1페이지부터 표시함  

 

home.jsp에도 추가하자

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page session="false" %>
<html>
<head>
	<title>Home</title>
</head>
<body>
<h1>
	헬로우 월드!
</h1>

<P>  The time on the server is ${serverTime}. </P>

<p><a href="/board/listPage?num=1">글 목록(페이징)</a></p>
<p><a href="/board/list">게시물 목록</a></p>
<p><a href="/board/write">게시물 작성</a></p>

</body>
</html>

 

테스트