개발자첫걸음

<form id="search_form">

<table class="topTable">

<tr>

<td style="width:15%;">

<input type="checkbox" id="joinCheck" name="joinCheck" value="0" ${param.joinCheck eq '0'? "checked" : "" } onclick="joinChk()">

<label for="joinCheck" style="font-size:5px; position:relative; top:-1.5px;">참가가능만 보기</label>

</td>

<td style="width:15%;">

<select id="sortField" name="sortField" onchange="orders(this.value)">

<option value="postDateDESC" ${param.sortField eq 'postDate DESC'? "selected" : "" }>최신순</option>

<option value="postDate" ${param.sortField eq 'postDate'? "selected" : "" }>작성일자순</option>

<option value="title" ${param.sortField eq 'title'? "selected" : "" }>제목순</option>

</select>

</td>

<td>

<select id="searchField" name="searchField">

<option value="title" ${param.searchField eq 'title'? "selected" : "" }>제목</option>

<option value="content" ${param.searchField eq 'content'? "selected" : "" } >내용</option>

<option value="m_name" ${param.searchField eq 'm_name'? "selected" : "" } >산이름</option>

<option value="id" ${param.searchField eq 'id'? "selected" : "" }>작성자</option>

</select>

<div id="textSearch">

<input type="text" name="searchWord" id="search" placeholder="검색" value="${not empty param.searchWord? param.searchWord : '' }" >

<button class="btn" style="height: 38px;"><i class="fa-solid fa-magnifying-glass i-con"></i></button>

</div>

</td>

</tr>

</table>

</form>

-- 게시판 기본 형태 구성 --

<table class="boardList">

<c:choose>

<c:when test="${empty boardLists }" >

<tr class="zero"><td colspan="8">등록 된 게시물이 없습니다.</td></tr>

</c:when>

<c:otherwise>

-- boardList에 내용이 없으면 "등록된 게시물이 없습니다." --

<c:forEach items="${boardLists }" var="b">

<tr style="border-top:1px solid darkgray">

<td width="4%">${b.mate_num }.</td>

<td width="10%">${b.m_name }</td>

<td rowspan="2" style="font-size:18px; height:55px;"><a class="link" href='./MateBoardView${ph.sc.getQueryString(ph.sc.page) }&num=${b.mate_num }&nickName=${b.nickName }'>${b.title }</a></td>

<fmt:formatDate value="${today }" type="date" pattern="yyyy-MM-dd" var="now"/>

<fmt:formatDate value="${b.postDate }" type="date" pattern="yyyy-MM-dd" var="post"/>

<c:choose>

<c:when test="${now eq post }">

<td colspan="4"><fmt:formatDate value="${b.postDate }" type="time" pattern="HH:mm" /></td>

<td rowspan="2" width="1%" style="font-size:5px; ${b.joinCheck eq 0? "background-color:rgba(48, 102, 71, 0.9)" : "background-color:rgba(241, 105, 81, 0.9)"}"></td>

</c:when>

<c:otherwise>

<td colspan="4">${post }</td>

<td rowspan="2" width="1%" style="font-size:5px; ${b.joinCheck eq 0? "background-color:rgba(48, 102, 71, 0.9)" : "background-color:rgba(241, 105, 81, 0.9)"}"></td>

</c:otherwise>

</c:choose>

-- boardList에 내용이 있으면 forEach문을 통해 하나씩 반복 출력 --

</tr>

<tr class="last">

<td width="3%"><img style="width:50%;" src="https://img.icons8.com/?size=512&id=12438&format=png"></td>

<td width="3%" style="cursor:pointer;" onClick="location.href='./yourpage?id=${b.id}'">${b.nickName }</td>

<td width="3%"><img style="width:70%;" src="https://img.icons8.com/?size=512&id=lJUgtSWOeJR9&format=png"></td>

<td width="3%">${b.viewCount }</td>

<td width="3%"><img style="width:67%;" src="https://img.icons8.com/?size=512&id=38977&format=png"></td>

<td width="3%">${b.commentCount }</td>

</tr>

</c:forEach>

</c:otherwise>

</c:choose>

</table>

<table class="bottomTable">

<tr>

<td colspan="7" class="write-btn">

<button class="bttn" onclick="location.href='./MateBoardWrite${ph.sc.getQueryString(ph.sc.page) }'"><i class="fa-solid fa-pen i-con"></i>글쓰기</button>

</td>

</tr>

</table>

<table class="myTable" style="background-color: #f9f9f9;">

<tr class="header">

<th colspan="7" style="text-align: center; height:40px;" >

<c:if test="${ph.showPrev }" >

<a href ="<c:url value='/MateBoardList${ph.sc.getQueryString(ph.beginPage-1)}'/>" >&laquo;</a>

</c:if>

<c:forEach var="i" begin="${ph.beginPage }" end="${ph.endPage }">

<c:choose>

<c:when test="${not empty sortField}" >

<a class='${ph.sc.page==i? "check" : "" }' href="<c:url value='./MateBoardList${ph.sc.getQueryString(i) }${not empty joinCheck? "&joinCheck=0" : "" }&sortField=${sortField }' />">${i }</a>

</c:when>

<c:otherwise>

<a class='${ph.sc.page==i? "check" : "" }' href="<c:url value='./MateBoardList${ph.sc.getQueryString(i) }${not empty joinCheck? "&joinCheck=0" : "" }' />">${i }</a>

</c:otherwise>

</c:choose>

</c:forEach>

<c:if test="${ph.showNext }" >

<a href ="<c:url value='/MateBoardList${ph.sc.getQueryString(ph.endPage+1)}'/>" >&raquo;</a>

</c:if>

</th>

</tr>

-- 페이지 이동 구현 -- 

</table>

public class PageHandler {

private SearchCondition sc;

public final int naviSize = 10; // page navigation size

private int totalCnt; // 게시물의 총 갯수

private int totalPage; // 전체 페이지의 갯수

private int beginPage; // 화면에 보여줄 첫 페이지

private int endPage; // 화면에 보여줄 마지막 페이지

private boolean showNext = false; // 이후를 보여줄지의 여부. endPage==totalPage이면, showNext는 false

private boolean showPrev = false; // 이전을 보여줄지의 여부. beginPage==1이 아니면 showPrev는 false

public PageHandler(int totalCnt, Integer page) {

this(totalCnt, new SearchCondition(page, 10));

}

public PageHandler(int totalCnt, Integer page, Integer pageSize) {

this(totalCnt, new SearchCondition(page, pageSize));

}

public PageHandler(int totalCnt, SearchCondition sc) {

this.totalCnt = totalCnt;

this.sc = sc;

doPaging(totalCnt, sc);

}

private void doPaging(int totalCnt, SearchCondition sc) {

this.totalPage = (int)Math.ceil(totalCnt/(double)sc.getPageSize());

this.sc.setPage(Math.min(sc.getPage(), totalPage)); // page가 totalPage보다 크지 않게

this.beginPage = (this.sc.getPage() -1) / naviSize * naviSize + 1; // 11 -> 11, 10 -> 1, 15->11. 따로 떼어내서 테스트

this.endPage = Math.min(beginPage + naviSize - 1, totalPage);

this.showPrev = beginPage!=1;

this.showNext = endPage!=totalPage;

}