2. 프로젝트 목록 페이지에 정렬 링크 추가
프로젝트 목록에서 정렬을 바꿀 수 있게 각 컬럼의 헤더에 정렬 링크를 추가한다.
webapp/project 폴더의 ProjectList.jsp 파일을 열고 다음과 같이 테이블 컬럼의 헤더에 정렬 링크를 추가한다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>프로젝트 목록</title>
</head>
<body>
<jsp:include page="/Header.jsp"/>
<h1>프로젝트 목록</h1>
<p><a href='add.do'>신규 프로젝트</a></p>
<table border="1">
<tr>
<th><c:choose>
<c:when test="${orderCond == 'PNO_ASC'}">
<a href="list.do?orderCond=PNO_DESC">번호↑</a>
</c:when>
<c:when test="${orderCond == 'PNO_DESC'}">
<a href="list.do?orderCond=PNO_ASC">번호↓</a>
</c:when>
<c:otherwise>
<a href="list.do?orderCond=PNO_ASC">번호︎</a>
</c:otherwise>
</c:choose></th>
<th><c:choose>
<c:when test="${orderCond == 'TITLE_ASC'}">
<a href="list.do?orderCond=TITLE_DESC">제목↑</a>
</c:when>
<c:when test="${orderCond == 'TITLE_DESC'}">
<a href="list.do?orderCond=TITLE_ASC">제목↓</a>
</c:when>
<c:otherwise>
<a href="list.do?orderCond=TITLE_ASC">제목︎</a>
</c:otherwise>
</c:choose></th>
<th><c:choose>
<c:when test="${orderCond == 'STARTDATE_ASC'}">
<a href="list.do?orderCond=STARTDATE_DESC">시작일↑</a>
</c:when>
<c:when test="${orderCond == 'STARTDATE_DESC'}">
<a href="list.do?orderCond=STARTDATE_ASC">시작일↓</a>
</c:when>
<c:otherwise>
<a href="list.do?orderCond=STARTDATE_ASC">시작일</a>
</c:otherwise>
</c:choose></th>
<th><c:choose>
<c:when test="${orderCond == 'ENDDATE_ASC'}">
<a href="list.do?orderCond=ENDDATE_DESC">종료일↑</a>
</c:when>
<c:when test="${orderCond == 'ENDDATE_DESC'}">
<a href="list.do?orderCond=ENDDATE_ASC">종료일↓</a>
</c:when>
<c:otherwise>
<a href="list.do?orderCond=ENDDATE_ASC">종료일</a>
</c:otherwise>
</c:choose></th>
<th><c:choose>
<c:when test="${orderCond == 'STATE_ASC'}">
<a href="list.do?orderCond=STATE_DESC">상태↑</a>
</c:when>
<c:when test="${orderCond == 'STATE_DESC'}">
<a href="list.do?orderCond=STATE_ASC">상태↓</a>
</c:when>
<c:otherwise>
<a href="list.do?orderCond=STATE_ASC">상태</a>
</c:otherwise>
</c:choose></th>
<th></th>
</tr>
<c:forEach var="project" items="${projects}">
<tr>
<td>${project.no}</td>
<td><a href='update.do?no=${project.no}'>${project.title}</a></td>
<td>${project.startDate}</td>
<td>${project.endDate}</td>
<td>${project.state}</td>
<td><a href='delete.do?no=${project.no}'>[삭제]</a></td>
</tr>
</c:forEach>
</table>
<jsp:include page="/Tail.jsp"/>
</body>
</html>
- 이전의 컬럼 헤더
이전 JSP 소스에서는 컬럼 헤더를 다음과 같이 일반 텍스트로 출력하였다.
<tr>
<th>번호</th>
<th>제목</th>
<th>시작일</th>
<th>종료일</th>
<th>상태</th>
<th></th>
</tr>
- 정렬 링크가 걸린 컬럼 헤더
변경된 소스를 보면 컬럼 헤더에 링크를 걸었다. 즉 컬럼 헤더를 클릭했을 때 해당 컬럼에 대해 오름차순 또는 내림차순으로 프로젝트 목록을 정렬하게 만들었다. 그중에서 프로젝트 제목에 걸어 놓은 링크를 살펴본다.
<th><c:choose>
<c:when test="${orderCond == 'TITLE_ASC'}">
<a href="list.do?orderCond=TITLE_DESC">제목↑</a>
</c:when>
<c:when test="${orderCond == 'TITLE_DESC'}">
<a href="list.do?orderCond=TITLE_ASC">제목↓</a>
</c:when>
<c:otherwise>
<a href="list.do?orderCond=TITLE_ASC">제목︎</a>
</c:otherwise>
</c:choose></th>매개변수 'orderCond'의 값이 'TITLE_ASC'이면 오름차순으로 정렬하라는 요청이기 때문에 컬럼 헤더는 '제목↑'이 출력된다. 이 상태에서 링크를 클릭하면 내림차순으로 정렬해야 하기 때문에 <a> 태그의 URL은 'list.do?orderCond=TITLE_DESC'이 된다. 매개변수 값 'TITLE_DESC'는 프로젝트 제목에 대해 내림차순으로 정렬하라는 의미이다. 즉 오르차순일 때 컬럼 헤더를 클릭하면 내림차순으로 정렬하고, 반대로 내림차순일 때 컬럼 헤더를 클릭하면 오름차순으로 정렬한다.
프로젝트 제목에 대한 정렬 요청이 없으면 <c:otherwise> 태그의 내용이 출력된다. 즉 컬럼 헤더로 '제목'을 출력한다. 이 상태에서 링크를 클릭하면 프로젝트 제목에 대해 오름차순으로 정렬할 것을 서버에 요청한다.
참고도서 : https://freelec.co.kr/book/1674/
[열혈강의] 자바 웹 개발 워크북
[열혈강의] 자바 웹 개발 워크북
freelec.co.kr
'교재 실습 > 자바 웹 개발 워크북' 카테고리의 다른 글
| 118. 동적 SQL의 사용 (5) (0) | 2022.09.22 |
|---|---|
| 117. 동적 SQL의 사용 (4) (0) | 2022.09.21 |
| 115. 동적 SQL의 사용 (2) (1) | 2022.09.19 |
| 114. 동적 SQL의 사용 (1) (0) | 2022.09.18 |
| 113. 로그 출력 켜기 (2) (0) | 2022.09.14 |
댓글