이하 구디아카데미 김지훈 강사님의 수업자료와 강의 내용 정리, 실습한 내용을 정리함
Paging
- 리스트를 작성 하다 보면 개수가 많아지게 된다.
- 이 경우 특정 개수만큼 페이지를 나누어 보여 주게 된다.
- 페이지 처리의 원리
http://localhost:8080/gudi/list?pagePernum=10&page=1
- 페이징 처리 라이브러리
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- bootstrap : 디자인을 위한 프레임워크 -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jquery 는 사용하는 플러그인과 다른 라이브러리와의 충돌 여부를 확인해야 한다. -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<!-- 페이징 처리를 위한 라이브러리 -->
<script src="resources/js/jquery.twbsPagination.js" type="text/javascript"></script>
<!-- resources 로 요청이 오면 resources 폴더 로 이동해서 css 폴더의 common.css 를 실행시켜라 -->
<link rel="stylesheet" href="resources/css/common.css" type="text/css">
</head>body
<tr>
<td colspan="5" id="paging">
<!-- 플러그인 사용 (twbsPagination) - 이렇게 사용하라고 tutorial 에서 제공-->
<div class="container">
<nav aria-label="Page navigation" style="text-align:center">
<ul class="pagination" id="pagination"></ul>
</nav>
</div>
</td>
</tr>
view
-
showPage 기본 값을 1 로 우선 설정한다.
-
id 가 pagePerNum 인 녀석에 change 가 일어나면 함수 실행
-
id 가 pagination 인 녀석에 twbsPagination 플러그인으로 UI 그리기를 한 것을 'destroy'로 지워준다.
-
listCall 함수에 변수 showPage 를 넣어서 실행
-
함수 listCall 에 받아온 매개변수를 넣어 실행한다.
-
get 타입, 요청명 'list', 보내는 데이터는 pagePerNum 이라는 이름으로 pagePerNum 의 값과 page 라는 이름으로 page 를 보낸다.
-
dataType 은 JSON, 성공 시에는 받아온 data 를 매개변수로 받아 함수를 실행한다.
-
실행문은 콘솔에 data 찍기와 drawList 함수 실행
-
에러 발생 시 이벤트 객체를 콘솔에 찍어준다.
- 함수 drawList는 매개변수 obj 를 넣어서 실행된다.
- 실행문은 변수 content 준비
- obj 의 list 를 향상된 for 문으로 item 의 인덱스만큼 돌린다.
- 행 넣고 열마다 idx, subject, user_name, bHit, reg_date 문자열을 넣는다.
- id 가 list 인 녀석을 비워준다.(drawList가 호출될 때마다 기존에 그려진 것을 한번 비워줘야 중복되지 않음)
- id 가 list 인 녀석에 content 를 넣어준다.
- 그다음 UI 를 플러그인 사용해서 그려준다.
- 보여줄 페이지는 showPage(기본 값 상태에서는 1)
- 총 페이지 수는 obj의 pages(받아온 데이터의 pages 변수-총 게시물 수/페이지당 보여줄 게시물 수를 서버에서 계산해서 변수 pages에 담음)
- 보여주는 페이지 전환 버튼 수
- 번호 클릭 시 실행하는 함수
- 만약 showPage(기본 값은 1로 설정해둠) 가 page 와 같지 않을 시 콘솔에 입력된 page 를 찍고 찍힌 page 를 showPage 에 넣는다.
- 그리고 listCall 을 실행한다.
Controller
- 기본 호출 시 list.jsp 로 이동
- list 요청이 오면 실행하는 메서드
- hashmap 타입을 반환하는 list 함수는 매개변수로 pagePerNum 과 page 를 받아서 실행된다.
- pagePerNum 은 페이지당 보여줄 개수를 view 에서 찍어준 값을 가져옴
- page 는 유저가 찍은 보여줄 페이지
- 반환 값을 service 에서 list 메서드를 pagePerNum과 page 매개변수를 넣고 실행한 결과
Service
-
pagePerNum 을 int 로 변환해서 변수 ppn 에 담는다.
-
page 를 int 로 변환해서 변수 p 에 담는다.
-
몇 번부터 몇 개 보여 줄지를 구하기 위해 유저가 클릭한 page-1을 한 후 보여줄 게시글 수를 곱한 값을 변수 offset 에 담는다.
-
dao 의 list 변수를 ppn과 offset을 넣어 실행한 결과를 ArrayList 타입 list 에 담는다.
-
플러그인에 설정할 총 페이지 수를 구하기 위한 메서드
-
dao 의 totalPage 메서드를 ppn(보여줄 페이지 수) 을 넣어 실행한 결과를 int 변수 pages 에 담는다.
-
hashmap 을 변수 map 으로 객체화 해온다.
-
map 에 pages 라는 호출명으로 pages 를 부를 수 있게 넣는다.
-
map 에 list 라는 호출명으로 list 를 부를 수 있게 넣는다.
-
map 을 반환한다.
mapper
-
list 요청이 오면 select 문 실행
-
idx와 suvject 와 user_nam, bHit, reg_date를 가져온다 / bbs 테이블로부터, idx 내림차순으로 / 보여줄 게시물 수를 offset 설정 값부터
-
totalPage 요청이 오면 int 를 반환하는 select 문 실행
-
bbs 테이블에서 idx 의 총 수(게시물 총수)를 보여줄 게시물 수로 나눈 것을 올림한 수를 pages 라고 별칭해서 선택한다.(별칭은 안 해도 상관없음)
