16. 페이징 이벤트 처리(조회 / 리스트 )
먼저 list.jsp에 추가할 사항이 좀 많음.
<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>
<form id="actionFrom" action="/board/list" method="get">
<input type='hidden' name='pageNum' value='${pageMaker.cri.pageNum }'>
<input type='hidden' name=amount value='${pageMaker.cri.amount }'>
</form>
<a class="page-link" href="${pageMaker.startPage -1 }" tabindex="-1">Previous</a>
<a class="page-link" href="${pageMaker.endPage + 1 }" tabindex="-1">Next1. <a class="page-link" href="${pageMaker.startPage -1 }" tabindex="-1">Previous</a>
11페이지에서 이전링크를 누르면 10페이지를 가게 하려고 하는 목적
3.<a class="page-link" href="${pageMaker.endPage + 1 }" tabindex="-1">Next
10페이즈에서 다음 링크를 눌렀을때 11페이지로 가게하려는 목적
var actionFrom = $("#actionFrom");
$(".page-link").on("click", function(e) {
e.preventDefault();
var tagetPage = $(this).attr("href")
actionFrom.find("input[name='pageNum']").val(tagetPage);
actionFrom.submit();
});
이제 스크립트로 해야하는 작업은 actionFrom 안에있는 pageNum을 찾아서 value값을 바꿔줘야함.
console.log로 찍어보는걸 추천. 디버깅 하는 작업을 해야함
했지만 여기에는 적지 않았음.
아무튼 타겟번호를 알았으니 actionFrom안에 input을 찾아야함 하지만 그 input 중에서 name 속성값이 pageNum인 녀석만 찾아야함. 그리고 벨류값을 tagetPage로 바꿔줌.
그리고 이걸 submit으로 보내면 이벤트가 정상적으로 작동이 됨.
근대 여기서 문제가 있음
조회를 하고 다시 리스트로 오면 1페이지로 가게 됨. 이러면 페이징 처리를 한 의미가 없음.
일단 list.jsp의 일부를 수정.
// <td>
// <a href='/board/get?bno=<c:out value="${board.bno}"/>'><c:out value="${board.title}" />
// </td>
<td><a class="move" href=<c:out value="${board.bno}"/>'><c:out value="${board.title}" /></td>클래스도 줘서 이벤트를 줄 수 있도록 수정.
$(".move").on("click", function(e){
e.preventDefault();
var targetBno = $(this).attr("href")
console.log(targetBno);
})
Bno번호를 알아내야함. 스크립트가 잘 작동 되는지 콘솔에 찍어봄
클릭할 때 마다 번호가 출력되는걸 확인 가능.
이제 해야하는건 actionForm에다가 hidden태그를 하나 넣어서 거기에 있는 값을 가지고 submit을 날리게 되면 조회할 때
링크와 페이지번호까지 같이 처리가 됨.
appnd를 활용.
$(".move").on("click", function(e){
e.preventDefault();
var targetBno = $(this).attr("href")
console.log(targetBno);
actionFrom.append("<input type='hidden' name='bno' value='"+targetBno+"'>'");
actionFrom.attr("action","/board/get");
})submit은 아직 안하고 먼저 리스트를 클릭해봄.
이동이 되는걸 확인 했으니 submit을 날려줌.
$(".move").on("click", function(e){
e.preventDefault();
var targetBno = $(this).attr("href")
console.log(targetBno);
actionFrom.append("<input type='hidden' name='bno' value='"+targetBno+"'>'");
actionFrom.attr("action","/board/get").submit();
})
그리고 다시 확인을 해봄.
이동되는게 확인이 되면서 URL에 pageNum와 amount 그리고 bno가 전송되는걸 확인
이런식으로 조회페이지에서 다시 목록으로 갈때나 수정 페이지에서 처리해줘야하고 삭제하고 난 뒤에도 이런 작업이 필요함.
그럼 페이지 번호를 유지 시키는 작업을 시작.
기존에는 조회를 할 때 bno만 있으면 되었는데 이제는 Criteria가 필요함
pageNum과 amount가 필요함.
BoardController로 이동해서 수정작업 시작.
@GetMapping({"/get", "/modify"})
public void get(@RequestParam("bno")long bno, @ModelAttribute("cri") Criteria cri, Model model) {
log.info("get or modify");
model.addAttribute("board", service.get(bno));
}
그리고 get.jsp에서는 버튼을 클릭하면 form 태그를 이용하는 방식이 깔끔하다고 생각하니 form태그로 실행.
<form id="actionFrom" 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>
<div class="dox-footer">
<button type="button" class="btn btn-default listBtn"><a href='/board/list'>List</a></button>
<button type="button" class="btn btn-default modBtn"><a href='/board/modify?bno=<c:out value="${board.bno}"/>'>Modify</a></button>
</div>
<script>
var actionFrom = $("#actionFrom");
$(".listBtn").click(function(e){
e.preventDefault();
actionFrom.submit();
})
</script>
그리고 조회 페이지에서 다시 리스트로 가면
페이지가 고정되는걸 확인 가능함.
근대 리스트로 다시 돌아갔을때 bno값은 필요가 없음 이걸 스크립트로 삭제 처리함.
<script>
var actionFrom = $("#actionFrom");
$(".listBtn").click(function(e){
e.preventDefault();
actionFrom.find("input[name=bno]").remove();
actionFrom.submit();
})
</script>
이런식으로 수정 삭제도 진행.
수정먼저 진행하는데 수정할 때는 bno가 필요함
$(".modBtn").click(function(e){
e.preventDefault();
actionFrom.attr("action","/board/modify");
actionFrom.submit();
});
스크립트 추가 후 modify로 가보면.
고정이 성공적으로 잘 되었음.
너무 길어져서 다음 포스팅으로