페이징 처리와 검색이 들어간 list.jsp이다.
반복숙달하자.
================================ JSP ================================
<!-- 스크립트 부분 / CDN : jQuery(3.3.1) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 버튼 이벤트 처리
// 글쓰기 버튼
$("#writeBtn").click(function(){
location = "write.do";
});
// 새로고침 버튼
$("#reloadBtn").click(function(){
location.reload();
});
// 게시글에 대한 tr 이벤트 처리
$(".data").click(function(){
var no = $(this).find("td:first").text();
location = "view.do?no="+no // 글번호를 전달한다.
+"&page=${cri.page}" // 페이지 전달.
+"&perPageNum=${cri.perPageNum}" // 한 페이지에 몇 개를 출력할지 결정.
+"&searchType=${cri.searchType}" // 서치 타입을 결정
+"&keyword=${cri.keyword}"; // 키워드 설정
});
// 표시하는 글 수를 바꾸면 이벤트 처리를 해서 다시 리스트를 불러온다.
$("#perPageNum").change(function(){
// alert("select change!");
location = "list.do?"
+"page=1" // 페이지 전달한다.
+"&perPageNum="+$("#perPageNum").val() // 페이지 당 글수 전달
+"&searchType=${cri.searchType}" // 서치 타입을 결정
+"&keyword=${cri.keyword}"; // 키워드 설정
});
// 글등록 후 경고
${msg == "writeOK"?"alert('글등록이 완료되었습니다.');":""}
// 글 삭제 후 경고
${msg == "deleteOK"?"alert('글삭제가 완료되었습니다.');":""}
});
</script>
<!-- CSS -->
<style type="text/css">
.data:hover {
background: #eee;
cursor: pointer;
}
</style>
<!-- html 부분 -->
<body>
<h1>게시판 리스트</h1>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<span>게시판 리스트</span>
<select name="perPageNum" id="perPageNum">
<option ${cri.perPageNum == 10?"selected='selected'":"" }>10</option>
<option ${cri.perPageNum == 20?"selected='selected'":"" }>20</option>
<option ${cri.perPageNum == 30?"selected='selected'":"" }>30</option>
<option ${cri.perPageNum == 50?"selected='selected'":"" }>50</option>
<option ${cri.perPageNum == 100?"selected='selected'":"" }>100</option>
</select>
<form class="navbar-form">
<div class="form-group navbar-left" >
<select class="form-control navbar-left list-group" name="searchType">
<option value="n" ${cri.searchType == "n"?"selected='selected'":"" }>-----</option>
<option value="t" ${cri.searchType == "t"?"selected='selected'":"" }>제목</option>
<option value="c" ${cri.searchType == "c"?"selected='selected'":"" }>내용</option>
<option value="w" ${cri.searchType == "w"?"selected='selected'":"" }>작성자</option>
<option value="tc" ${cri.searchType == "tc"?"selected='selected'":"" }>제목+내용</option>
<option value="cw" ${cri.searchType == "cw"?"selected='selected'":"" }>내용+작성자</option>
<option value="tcw" ${cri.searchType == "tcw"?"selected='selected'":"" }>제목+내용+작성자</option>
</select>
<input type="text" class="form-control navbar-left " placeholder="검색어를 입력하세요." name="keyword"
value="${cri.keyword }">
</div>
<button type="submit" class="btn btn-default">
<i class="glyphicon glyphicon-search"></i>
</button>
</form>
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>글번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<c:forEach var="dto" items="${list }">
<tr class="data">
<td>${dto.no }</td>
<td>${dto.title }</td>
<td>${dto.writer }</td>
<td><fmt:formatDate value="${dto.writeDate }" pattern="yyyy. MM. dd HH:mm E요일"/></td>
<td>${dto.hit }</td>
</tr>
</c:forEach>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<ul class="pagination">
<c:if test="${cri.prev }">
<li><a href="list.do?page=${cri.startPage-1 }&perPageNum=${cri.perPageNum}&searchType=${cri.searchType}&keyword=${cri.keyword}">
<i class="glyphicon glyphicon-step-backward"></i>
</a></li>
</c:if>
<c:forEach begin="${cri.startPage }" end="${cri.endPage }" var="idx">
<li ${cri.page==idx?"class='active'":"" }><a href="list.do?page=${idx }&perPageNum=${cri.perPageNum}&searchType=${cri.searchType}&keyword=${cri.keyword}">${idx }</a></li>
</c:forEach>
<c:if test="${cri.next }">
<li><a href="list.do?page=${cri.endPage+1 }&perPageNum=${cri.perPageNum}&searchType=${cri.searchType}&keyword=${cri.keyword}">
<i class="glyphicon glyphicon-step-forward"></i>
</a></li>
</c:if>
</ul>
</td>
</tr>
<tr>
<td colspan="2">
<button id="writeBtn">글쓰기</button>
<button id="reloadBtn">새로고침</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</body>
================================ JSP ================================
'프로그래밍 > 웹 프로그래밍' 카테고리의 다른 글
| [JavaScript] 입력되면 다른 곳에서 똑같이 출력되는 실시간 IO(jQuery 3.3.1, JSP) (1) | 2018.05.22 |
|---|---|
| [Spring] Criteria.class(페이징처리, 검색) (0) | 2018.05.21 |
| [JavaScript] HTML이 적용된 것을 실시간IO로 확인(jQuery 3.3.1, JSP) (0) | 2018.05.21 |
| [Mybatis] DAO 부분 정리 (0) | 2018.05.21 |
| [Mybatis] boardMapper.xml (Oracle) (0) | 2018.05.21 |