728x90

 

 

페이징 처리(페이지네이션)

중간에 보고 있는 현재 번호(currentPage) 외에 이전(prev), 다음(next) 버튼이 따로 있고

이들은 currentPage번호보다 작거나 커야함

그리고 각각 1과 마지막 번호(maxPage)의 경우가 있어서 따로 <c:if>로 작성 해야하는 구조임. 구조파악 완료

 

<!-- 페이징 처리 -->
<tr align="center" height="20" id="buttonTab">
    <td colspan="6">
        <!-- [이전] -->
        <c:if test="${ pi.currentPage <= 1 }">
            [이전] &nbsp; <!-- 1페이지에서만 나오는 기호 설정. 마찬가지로 마지막페이지에서 나오는 기호도 따로 지정해줘야함 -->
        </c:if>
        <c:if test="${ pi.currentPage > 1 }">
            <c:url var="before" value="blist.bo">
                <c:param name="page" value="${ pi.currentPage - 1 }"/>
            </c:url>
            <a href="${ before }">[이전]</a>
        </c:if>

        <!-- 페이지 번호 -->
        <c:forEach var="p" begin="${ pi.startPage }" end="${ pi.endPage }">
            <c:if test="${ p eq pi.currentPage }">
                <font color="red" size="4"><b>[${ p }]</b></font>
            </c:if>
            <c:if test="${ p ne pi.currentPage }">
                <c:url var="pagination" value="blist.bo">
                    <c:param name="page" value="${ p }"/>
                </c:url>
                <a href="${ pagination }">${ p }</a> &nbsp;
            </c:if>
        </c:forEach>

        <!-- [다음] -->
        <c:if test="${ pi.currentPage >= pi.maxPage }">
            [다음]		<!-- 마지막 페이지에서만 나오는 기호 설정. 마찬가지로 첫페이지에서 나오는 기호도 따로 지정해줘야함 -->
        </c:if>
        <c:if test="${ pi.currentPage < pi.maxPage }">
            <c:url var="after" value="blist.bo">
                <c:param name="page" value="${ pi.currentPage + 1 }"/>
            </c:url>
            <a href="${ after }">[다음]</a>
        </c:if>

    </td>
</tr>
728x90
반응형
728x90

 

 

details, summary (toggle)+ <c:foreach> 적용 코드

1.반복하기 위해 가장 바깥 테두리에 <c:foreach>를 위치시킴

2.detail태그 기능을 사용할려면 처음과 끝이 detail태그로 덮어야하므로 처음과 끝은 detail태그로

3.summary가 접혀져있고 요약부분을 보여주는 부분이기에 접혀져있는 상태에서 보여주고 싶은 부분을 summary 안에 집어넣고 펼쳐있을 때(open) 보여주고 싶은 부분은 <p>,<ul,li>태그 같은 걸로 처리해야한다

4.summary부분을 하나로 묶고 css 하기위해 div로 한번 감싸고 그 안에 게시판 번호,타이틀,작성날짜 등을 넣었다

5.펼쳐지는 부분(open)을 하나로 관리하기 위해 <div class="QnaToggleOpen"> 만들고 그 안에 <ul>과 <li>로 펼쳐지는 부분을 구현

 

 

728x90
반응형
728x90

 

 

&nbsp;

 공백을 표시하기 위한 특수문자

 

<%@ 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>prac</title>

<style type="text/css">
	#tb{margin:auto; width:700px; border-collapse:collapse;}
	#tb tr td{padding: 5px}
	#buttonTab{border-left: hidden; border-right:hidden;}

</style>

</head>
<body>


	<c:import url="..common/menubar.jsp"/>
	
	<h1 align="center">게시글 목록</h1>
	<h3 align="center"> 총 게시글 갯수 : ${pi.listCount }</h3>
	
	<table border="1" id="tb">
		<!-- 제목 tr -->
		<tr style="background: yellowgreen;">
			<th>번호</th>
			<th width="300">제목</th>
			<th>작성자</th>
			<th>날짜</th>
			<th>조회수</th>
			<th>첨부파일</th>
		</tr>
		<!-- 내용 tr -->
		<c:forEach var="b" items="${list}">
			<tr class="contentTr">
				<td align="center">${b.boardId }</td>
				<td align="center">${b.boardTitle }</td>
				<td align="center">${b.boardWriter}</td>
				<td algin="center">${b.boardCreateDate }</td>
				<td algin="center">${b.boardCount }</td>
				<td align="center"></td>			
				<td align="left">
					<c:if test="${ !empty b.originalFileName }">
						◎
					</c:if>
				</td>		
			</tr>
		</c:forEach>	
		<!-- 글쓰기 버튼 tr  -->
		<tr>
			<td colspan="6" align="right" id="buttonTab">
				<c:if test="${!empty loginUser }">
					&nbsp; &nbsp; &nbsp; <!-- &nbsp; : 공백을 표시하기 위한 특수문자 -->
					<button onclick="location.href='binsertView.bo';">글쓰기</button>
				</c:if>
			</td>
		</tr>
		
		<!-- 페이징처리 tr -->
		
		
		
	</table>
	
	
	<script>
	
	
	</script>


</body>
</html>
728x90
반응형

+ Recent posts