[Spring Boot] 📚 Paging

yihyun·2024년 9월 20일

Spring Boot

목록 보기

21/33

Paging

리스트를 만들다 보면 10, 20개 까지는 한 화면에서 확인하기가 편하지만
만약 30만개의 데이터가 있다면 한 페이지에 담을 경우 한 눈에 보기도 어렵고, 너무 많은 데이터를 한번에 불러와야 하기 때문에 효율성이 떨어지게 된다.

이럴 때 Paging을 사용하면 특정 개수만큼의 페이지를 나누어 보여줄 수 있다.

페이징을 사용하기 위해서는 라이브러리가 필요하다.

https://josecebe.github.io/twbs-pagination/ (zip)
https://github.com/josecebe/twbs-pagination/blob/master/examples/index.html (git)
→ git을 참고해 원하는 기능을 수정 사용한다!

limit, offset

라이브러리까지 준비되었다면 이제 DB에서 우리가 데이터를 원하는 개수만큼 가져오기 위한 쿼리문을 먼저 살펴보자

limit : select * from bbs limit 0, 5;
limit/offset : select * from bbs limit 5 offset 0;

페이징을 하기 위해서는

총 데이터의 수 SELECT COUNT(idx) AS pages FROM bbs;
한 페이지에 보여줄 데이터 수에 따른 총 페이지 수 SELECT ceil(COUNT(idx)/20) AS pages FROM bbs;
❗ ceil : 올림함수

🔽 view

html

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/common.css" type="text/css">
	<!-- 페이징 사용을 위한 설정 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
    <script src="js/jquery.twbsPagination.js" type="text/javascript"></script>
</head>
<body>
	<button onclick="location.href='writeForm'">글쓰기</button>
	<table>
		<thead>
			<tr>
				<th>글번호</th><th>제목</th><th>작성자</th><th>조회수</th><th>작성일</th><th>삭제</th>
			</tr>
		</thead>
		<tbody id="list"></tbody>
		<!-- 페이징이 그려질 곳 -->
		<tr> 
			<th colspan="6">
              	<!-- 페이징 사용을 위한 설정 -->
				<div class="container">
   					<nav aria-label="Page navigation">
        				<ul class="pagination" id="pagination"></ul>
    				</nav>
				</div>
			</th>
		</tr>
	</table>
</body>
</html>

java script

<script>
	var showPage = 1; // 기본 페이지

	pageCall(showPage); 

	function pageCall(page){
		$.ajax({
	    	type: 'GET',
	        url: 'list.ajax', 
	        data: {
	        	'page' : page, // 몇페이지를 보여줄건지
	        	'cnt' : 20, // 페이지 당 보여줄 게시물 수
	        },dataType: 'json', 
	        success: function(data) {
	        	listPrint(data.list);
	        	// 페이징 플러그인 처리
	        	$('#pagination').twbsPagination({ // twbsPagination() 함수 실행
	        		startPage: 1, // 현재 페이지 (시작할 페이지)
	        		totalPages: data.totalPage, // 최대 페이지 수
	        		visiblePages: 5, // 보여줄 페이지 수
	        		onPageClick: function(evt, page){
	        			console.log('evt',evt); // 클릭 이벤트의 모든 내용
	        			console.log('page',page); // 클릭한 페이지 번호
	        			pageCall(page); // 몇 번 페이지인지 서버에 정보 전달
	        		}
	        	}); 
	        },error: function(e){
	        	console.log(e);
	        }
	    });
	}
	
	// 리스트를 불러오는 함수 
	function listPrint(list){
		var content = '';
		for (var item of list) {
			content += '<tr>';
			content += '<td>'+item.idx+'</td>';
			content += '<td>'+item.subject+'</td>';
			content += '<td>'+item.user_name+'</td>';
			content += '<td>'+item.bHit+'</td>';
			content += '<td>'+item.reg_date+'</td>';
			content += '<td><a hrdf="#">삭제</a></td>';
			content += '</tr>';
		}
		$('#list').html(content);
	}
</script>

처음 제공될 페이지(1)를 변수에 담아준다 (showPage)
html 문서를 읽자마자 pageCall() 함수 실행 (페이지 번호는 1번)
data 에는 ① 보여줄 페이지 (page) ② 페이지 당 보여줄 게시물 수 (cnt) 를 설정한다.
success 했을 경우 listPrint(data.list) 로 DB에 있는 데이터를 표시한다.

✨ twbsPagination() 함수 실행 : jQuery 플러그인을 사용해 페이지네이션(페이징)을 구현하는 함수로, Twitter Bootstrap에서 제공하는 라이브러리 중 하나
✔ startPage : 현재 페이지 (시작할 페이지)
✔ totalPages : 최대 페이지 수
✔ visiblePages : 보여줄 페이지 수
✔ onPageClick : 페이지 클릭이 일어날 경우 실행할 함수를 지정 (evt : 클릭 이벤트의 모든 내용 / page : 클릭한 페이지 번호)
→ pageCall(page) : 현재 페이지 정보가 담겨있으므로, 해당 정보를 서버에 전달한다.

🔽 controller

@GetMapping(value="/list.ajax")
@ResponseBody
public Map<String, Object> list(String page, String cnt) {
		
		int page_ = Integer.parseInt(page);
		int cnt_ = Integer.parseInt(cnt);
				
		return service.list(page_, cnt_);
	}

view에서 ajax로 보내는 파라미터 이름과 받아주는 이름은 동일해야 한다!
페이지 정보가 String로 담겨오기 때문에 int로 변경해준다.

🔽 service

public Map<String, Object> list(int page, int cnt) {
		
	int limit = cnt; // 페이지 당 보여줄 게시물 수 
	int offset = (page-1) * cnt; // 몇 번 게시물 부터 시작할 것인지 지정
		
	int totalPages = dto.allCount(cnt);
		
	Map<String, Object> result = new HashMap<String, Object>();
	result.put("totalPage", totalPages); // 총 페이지 수
    
	// 나중에 필요할 수도 있으니까 만들어준다. (현재 필요 x)
	result.put("currPage", page); // 현재 페이지
	result.put("list", dto.list(limit, offset));
    
	return result;
}

20개 씩 게시물을 보여줄 경우 쿼리문은 select * from bbs limit 20 offset 0; 이 되고 2 페이지로 넘어갈 경우 select * from bbs limit 20 offset 20; 가 될 것이다.
▼
그렇다면 보여줄 페이지 수는 계속 동일하게 유지되고 시작되는 번호는 20 씩 증가한다.
▼
인덱스는 0 부터 시작하기 때문에 현재 페이지수 (page = 1) 에서 -1 을 해주고 보여줄 페이지 수 (cnt = 20) 을 곱해주는 것으로 limit 와 offset 을 지정해준다.

보여줄 게시물 수와 시작될 게시글 번호를 계산해 변수에 담아준다.
.allCount() 함수를 실행해 결과값을 변수에 담아준다. (총 페이지 수 / 20 의 결과값이 들어간다.)
받아온 결과를 totalPage 라는 key로 보내준다.

🔽 dto / mapper

DTO

int allCount(int cnt);

mapper

<select id="allCount">
	SELECT CEIL(COUNT(idx)/#{param1}) AS pages FROM bbs
</select>

전체 데이터 수를 count 해서 보여줄 페이지 수로 나누고 소수를 대비해 ceil 함수로 값을 정수로 올려준다.

이렇게 작성해주면 아래와 같은 결과를 볼 수 있다.

📚 Paging (지정한 숫자만큼 데이터 보여주기)

게시판을 보다보면 5, 10, 15, 20 등 다양한 기준으로 게시글을 볼 수 있다.
위에서 만든 paging은 보여줄 페이지가 20 으로만 고정되어 있기 때문에 동적으로 움직일 수 없다.

그렇다면 사용자가 원하는 숫자만큼 게시글을 볼 수 있게 하는 코드를 작성해보자!

🔽 view

<body>
	<button onclick="location.href='writeForm'">글쓰기</button>
	&nbsp;&nbsp;&nbsp;&nbsp;
	<select id="pagePerNum" >
		<option value="5">5</option>
		<option value="10">10</option>
		<option value="15">15</option>
		<option value="20" selected>20</option>
	</select>
	개 씩 보기
	<table>
		<thead>
			<tr>
				<th>글번호</th>
				<th>제목</th>
				<th>작성자</th>
				<th>조회수</th>
				<th>작성일</th>
				<th>삭제</th>
			</tr>
		</thead>
		<tbody id="list">
	
		</tbody>
		<tr>
			<th colspan="6">
				<div class="container">
		    		<nav aria-label="Page navigation">
		        		<ul class="pagination" id="pagination"></ul>
		    		</nav>
				</div>
			</th>
		</tr>
	</table>
</body>
<script>
	var show = 1;
	
	pageCall(show);

	$('#pagePerNum').change(function(){
		$('#pagination').twbsPagination('destroy');
		pageCall(show);
	});



	function pageCall(page) {
		$.ajax({
			type:'GET',
			url:'list.ajax',
			data:{
				'page':page,
				'cnt': $('#pagePerNum').val(),
			},
			datatype:'JSON',
			success:function(data){
				console.log(data);
				drawList(data.list)
				
				$('#pagination').twbsPagination({ // 페이징 객체 만들기
					startPage:1, 
            		totalPages:data.totalPages, 
            		visiblePages:5,
            		onPageClick:function(evt,page){
            			console.log('evt',evt); 
            			console.log('page',page); 
            			pageCall(page);
            		}
				});
			},
			error:function(e){
				console.log(e);
			}
		});
	}
	function drawList(list) {
		var content ='';
		list.forEach(function(view,idx){ 
			content +='<tr>';
			content +='<td>'+view.idx+'</td>';
			content +='<td><a href="detail.go?idx='+view.idx+'">'+view.subject+'</a></td>';
			content +='<td>'+view.user_name+'</td>';
			content +='<td>'+view.bHit+'</td>';
			content +='<td>'+view.reg_date+'</td>';
			content +='<td><a href="del?idx='+view.idx+'">삭제</a></td>';
			content +='</tr>';
		});
		$('#list').html(content);
	}


</script>

서버에서 DB에 있는 쿼리에 총 데이터 수 / 보여줄 데이터 수 를 해서 총 페이지 수를 받아와 넣어준다.
select 에 change 이벤트가 발생하면 destroy 를 해준다.
▶ 기존에 있던 페이징을 파괴한다.
보여줄 페이지는 select 에서 받아온 값을 넣어준다.
현재는 보여줄 페이지를 변경하면 강제로 1번 페이지로 이동하는데, 만약 마지막 페이지로 이동하고 싶다면 최대 페이지 수를 page 에 주면 된다.

🔽 controller

@RequestMapping("/list.ajax")
@ResponseBody
public Map<String, Object> list(String page,String cnt){
		
	int page_ = Integer.parseInt(page);
	int cnt_ = Integer.parseInt(cnt);
	
	return ser.list(page_, cnt_);
}

🔽 service

public Map<String, Object> list(int page, int cnt) {
		
	int limit = cnt;
	int offset = (page-1) * cnt;
	int totalpage = dao.count(cnt);
		
	Map<String, Object> result = new HashMap<String, Object>();
	result.put("totalPages", totalpage);
	result.put("currPage", page);
	result.put("list",dao.list(limit,offset));
		
	return result;
}

🔽 dao

List<BoardDTO> list(int limit, int offset);

🔽 mapper

<select id="list" resultType="kr.co.gudi.dto.BoardDTO">
	SELECT idx,subject,user_name,bHit,reg_date FROM bbs
  		ORDER BY idx DESC LIMIT #{param1} OFFSET #{param2}
</select>

<select id="count" resultType="int">
	SELECT CEIL(COUNT(idx)/#{param1}) AS pages FROM bbs
</select>