부트스트랩 테이블과 동적 JSTL 조지기 - (2)

저번 포스팅에서는 부트스트랩 테이블을 만들어보고 컨트롤러에서 뷰로 데이터를 넘겼다.

http://pjh3749.tistory.com/140

그 버튼클릭된것을 넘기는 부분 말고 실제 데이터도 보여주어야 하므로 같이 넘겨야 한다. 컨트롤러안에서

List<Map> list = service.selectServiceList();

model.addAttribute("list", list); 

이런식으로 넘겨준다. 데이터베이스에서 값을 가져오는 방법은 

에 자세히 설명되어 있으므로 참고하기 바란다.

http://pjh3749.tistory.com/136

본격적으로 jsp의 테이블을 보자.

<table class="table table-hover table-striped">

                            <thead>

                            <c:forEach items="${clickButtons}" var="buttons"  varStatus="status">

                            <th>${buttons}</th>

                            </c:forEach>

                            </thead>

thead부분이 바뀌었다. 바로 jstl을 이용해서 동적으로 클릭된 버튼의 이름으로 thead를 만드는 것이다. 

forEach안의 items는 컨트롤러에서 addAttribute로 넘긴 키 값에 해당한다. 즉, 버튼이 클릭된 이름들이 배열로 저장되있다가 뷰로 넘겨진 상태에서 저렇게 jstl로 뽑는 것이다. var는 이 jstl안에서 가져온 변수를 초기화 하는 이름이다. varStatus는 jstl의 속성을 쓰는 것인데 이 블로그 jstl관련 내용을 찾아보면 자세히 설명 되어있다.

자, 이렇게 뽑아와서 쓸 때는 var로 선언된 변수로 써야 한다. <th>${buttons}</th> 저거 한줄이면 된다. 왜냐하면 forEach자체가 반복문이며 자동으로 하나씩 돌아가기 떄문에 배열에 있는 값이 하나씩 나열되게 된다.

이런식으로 체크박스를 체크해주고 파란 버튼을 누른다.

그러면 이렇게 체크한 것들이 표에 헤드로 붙게 된다.

이제 이에 맞게 body쪽도 나와야 한다. 즉, 모든 칼럼의 데이터를 다 가져오기는 하지만 thead에 따라서 즉, 클릭된 버튼에 따라서 이에 해당하는 줄의 데이터를 보여줘야 하므로 if문으로 거르도록 하자.

tbody부분이다.

<tbody>

<c:forEach items="${list}" var="list" varStatus="status">

<tr>

<c:forEach items="${clickButtons}" var="buttons" varStatus="status">

       <c:if test="${buttons == '아이디'}">

 <td><c:out value="${list.id}"/></td>

 </c:if>

<c:if test="${buttons == '이름'}">

<td><c:out value="${list.userName}"/></td>

</c:if>

<c:if test="${buttons == '나이'}">

<td><c:out value="${list.age}"/></td>

</c:if>

<c:if test="${buttons == '국가'}">

<td><c:out value="${list.country}"/></td>

</c:if>

<c:if test="${buttons == '기타'}">

<td><c:out value="${list.etc}"/></td>

</c:if>

</c:forEach>

</tr>

</c:forEach>

</tbody>

forEach반복문이 2번 도는 것을 볼 수 있다. 처음은 list를 가져오는데 이것은 데이터베이스에서 조회한 모든 값이다. 두 번째 반복문에서는 클릭된 버튼의 수만큼 돌려준다. 그리고 버튼의 이름을 걸러서 list에서 가져온 전체데이터를 해당 목록만 걸러주는 역할을 하는 if문이 필요하다.

<c:if test="${buttons == '아이디'}"> 이 부분이 바로 그 부분이다. c:if는 if문이고 비교할 대상을 test에 넣는다. 여기서 큰 따옴표와 작은 따옴표를 주의해서 보자. buttons는 2중 포문 안쪽에서 도는 아이이고 그 이름이 아이디와 일치한다면 td로 값을 보여주는 형태이다.

결과화면

데이터베이스에 적절한 값을 넣어주고 테스트해보자.