7월 18일
1.페이지 번호 이벤트 처리
페이지번호의 링크는 페이지번호만 가지도록 하고,
별도의 form태그와 이벤트 처리를 통해서 submit으로 이동
...넘 수정한게 많아서 주석처리하면서 공부한거라 그대로 코드 올림..
(1)list.jsp 수정
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@include file="../includes/header.jsp"%>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Tables</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
DataTables Advanced Tables
<button id="regBtn" type="button" class="btn btn-xs pull-right">
게시글 등록
</button>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<table width="100%" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>수정일</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="board">
<tr class="odd gradeX">
<td>${board.bno}</td>
<td><a class='move' href='<c:out value="${board.bno}"/>'><c:out value="${board.title}"/> </td>
<td>${board.writer}</td>
<td><fmt:formatDate pattern="yyyy-MM-dd" value="${board.regdate}"/></td>
<td><fmt:formatDate pattern="yyyy-MM-dd" value="${board.updatedate}"/></td>
</tr>
</c:forEach>
</tbody>
</table>
<h3>${pageMaker}</h3>
<div class='pull-right'>
<ul class="pagination">
<c:if test="${pageMaker.prev}">
<li class="page-item">
<a class="page-link" href="${pageMaker.startPage-1}" tabindex="-1">Previous</a>
</li>
</c:if>
<c:forEach begin="${pageMaker.startPage}"
end="${pageMaker.endPage}" var="num">
<li class="page-item ${pageMaker.cri.pageNum==num?"active":""}">
<a class="page-link" href="${num}">${num}</a></li>
</c:forEach>
<c:if test="${pageMaker.next}">
<li class="page-item">
<a class="page-link" href="${pageMaker.endPage+1}" tabindex="-1">Next</a>
</li>
</c:if>
</ul>
</div>
<!-- 페이지번호를 클릭을 하면 링크를 통해가는게 아니라 폼태그를 submit을 날려서 처리할려고 함. 선택하는 번호에 따라서 pageNum부분이 바껴야함 -->
<form id='actionForm' action="/board/list" method='get'>
<input type='hidden' name='pageNum' value='${pageMaker.cri.pageNum}'>
<input type='hidden' name='amount' value='${pageMaker.cri.amount}'>
</form>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<!-- Modal 추가 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">게시판</h4>
</div>
<div class="modal-body">
처리가 완료되었습니다.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal 끝 -->
<%@include file="../includes/footer.jsp"%>
<script>
$(document).ready(function() {
var result='<c:out value="${result}"/>';
checkModal(result);
history.replaceState({},null,null);
function checkModal(result) {
if(result===''||history.state){
return;
}
if(result==='success'){
$(".modal-body").html(
"정상적으로 처리되었슴둥!!!");
}else if(parseInt(result)>0){
$(".modal-body").html(
"게시글 "+parseInt(result)+"번이 등록 되었습니다.");
}
$("#myModal").modal("show");
}
$("#regBtn").click(function(){
/* self는 window와 같다 */
self.location="/board/register";
});
var actionForm = $("#actionForm");
$(".page-link").on("click",function(e){
e.preventDefault(); //위에 지정한 a태그의 기본동작이 이동하는건데 그걸 막는다.
var targetPage=$(this).attr("href");
console.log(targetPage);
//actionForm에서 찾는다.input 중에 pageNum 을 value를 바꾼다.targetPage 로
actionForm.find("input[name='pageNum']").val(targetPage);
actionForm.submit();
});
//제이쿼리의 경우 이렇게 셀렉터를 이용해서 이벤트를 걸어주면 모든애들이 다같이 걸림, 따로따로 이벤트를 설정핼 필요가 없다.
$(".move").on("click",function(e){
e.preventDefault();
var targetBno=$(this).attr("href");
console.log(targetBno);
actionForm.append("<input type='hidden' name='bno' value='"+targetBno+"'>'");
actionForm.attr("action", "/board/get").submit();
});
});
</script> (2)BoardController 클래스 수정
package com.keduit.controller;
@Controller //스프링의 Controller빈으로 인식할수 있게함.
@RequiredArgsConstructor //해당 어노테이션은 final로 선언한 변수를 찾아서 주입해줌
@RequestMapping("/board/*")
@Log4j
//아래 모든코드가 테스트코드까지 성공했으면, service에서 Controller 까지 넘어가는 거는 문제없다는게 유추됨
public class BoardController {
private final BoardService service;
@GetMapping({"/get","modify"})
public void get(@RequestParam("bno")Long bno, @ModelAttribute("cri") Criteria cri, Model model) {
log.info("get..........");
model.addAttribute("board",service.get(bno));
}
}(3)get.jsp 수정
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@include file="../includes/header.jsp"%>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Board RedePage</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Board RedePage
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="form-group" >
<label>bno</label>
<input class="form-control" name="bno" readonly="readonly" value='<c:out value="${board.bno}"/>'>
</div>
<div class="form-group" >
<label>title</label>
<input class="form-control" name="title" readonly="readonly" value='<c:out value="${board.title}"/>'>
</div>
<div class="form-group">
<label>content</label>
<textarea rows="5" cols="50" name="content" readonly="readonly" class="form-control" ><c:out value="${board.content}"/></textarea>
</div>
<div class="form-group">
<label>writer</label>
<input class="form-control" name="writer" readonly="readonly" value='<c:out value="${board.writer}"/>'>
</div>
<form id='actionForm' action="/board/list" method='get'>
<input type='hidden' name='pageNum' value='${cri.pageNum}'>
<input type='hidden' name='amount' value='${cri.amount}'>
<input type='hidden' name='bno' value='${board.bno}'>
</form>
<button type="button" class="btn btn-default listBtn"><a href="/board/list">목록</a></button>
<button type="button" class="btn btn-default modBtn"><a href="/board/modify?bno=${board.bno}">수정하기</a></button>
<script>
var actionForm=$("#actionForm");
$(".listBtn").click(function (e) {
e.preventDefault();
actionForm.find("input[name='bno']").remove();
actionForm.submit();
});
$(".modBtn").click(function (e) {
e.preventDefault();
actionForm.attr("action","/board/modify");
actionForm.submit();
});
</script>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<%@include file="../includes/footer.jsp"%>
좋은개발자가 되기위한 삽질기록 노트