[B -2-21] 페이징 화면 처리 2

2019. 10. 3. 16:01ㆍProject B (SPMS)/Project B 파트3

반응형

페이지 번호 유지 조회 페이지로 이동

 

views/board

list.jsp

 

...더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<%@ include file="../includes/header.jsp"%>
<div class="row">
	<div class="col-lg-12">
		<h1 class="page-header">게시판 목록</h1>
	</div>
	<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading">게시글 목록 페이지<button id='regBtn' type="button" class="btn btn-xs pull-right btn-primary">게시글 등록</button></div>
			<!-- /.panel-heading -->
			<div class="panel-body">
				<table class="table table-striped table-bordered table-hover">
					<tbody>
					<c:forEach items="${list }" var="board">
						<tr>
							<td>
								<font color="Gray">
									<c:out value="${board.bno}"/>&nbsp;/&nbsp;
									<c:out value="${board.writer}"/>&nbsp;/&nbsp;
									<fmt:formatDate value="${board.regdate}" pattern="yyyy-MM-dd"/>&nbsp;/&nbsp;
									<fmt:formatDate value="${board.updateDate}" pattern="yyyy-MM-dd"/>
								</font><br />
								<font size="3px">
									<a class='move' href="<c:out value="${board.bno}"/>">
										<c:out value="${board.title}"/>
									</a>
								</font>
							</td>
						</tr>
					</c:forEach>
					</tbody>
				</table>
				
				<!-- 페이지네이션 시작 -->
				<div class='pull-right'>
					<ul class="pagination">
						<!-- 이전 -->
						<c:if test="${pageMaker.prev}">
							<li class="paginate_button previous"><a
								href="${pageMaker.startPage -1}">Previous</a></li>
						</c:if>

						<!-- 현재 -->
						<c:forEach var="num" begin="${pageMaker.startPage}" end="${pageMaker.endPage}">
							<li class='paginate_button  ${pageMaker.cri.pageNum == num ? "active":""} '>
								<a href="${num}">${num}</a>
							</li>
						</c:forEach>
						
						<!-- 다음 -->
						<c:if test="${pageMaker.next}">
							<li class="paginate_button next"><a
								href="${pageMaker.endPage +1 }">Next</a></li>
						</c:if>
					</ul>
				</div>
				<!--  페이지네이션 끝 -->
				
			<!-- 이전 현재 다음 버튼의 a 태그동작을 막기위한 폼 태그 -->
			<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>
			<!-- 폼 태그 종료 -->
			
			<!-- 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">&times;</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">Save changes</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
				
				
			</div>
			<!-- /.panel-body -->
		</div>
		<!-- /.panel -->
	</div>
	<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
<%@ include file="../includes/footer.jsp"%>

<script type="text/javascript">
	$().ready(function() {

						var result = '<c:out value="${result}"/>';

						checkModal(result);

						history.replaceState({}, null, null);

						function checkModal(result) {

							if (result === '' || history.state) {
								return;
							}

							if (parseInt(result) > 0) {
								$(".modal-body").html(
										"게시글 " + parseInt(result) + " 번이 등록되었습니다."
								);
							}

							$("#myModal").modal("show");
						}

						$("#regBtn").on("click", function() {

							self.location = "/board/register";

						});
						
						var actionForm = $("#actionForm");

						$(".paginate_button a").on("click", function(e) {
							e.preventDefault();
							console.log('click');
							actionForm.find("input[name='pageNum']").val($(this).attr("href"));
							actionForm.submit();
						});
						

						$(".move").on("click",function(e) {
											e.preventDefault();
											actionForm.append("<input type='hidden' name='bno' value='"
															+ $(this).attr("href")
															+ "'>");
											actionForm.attr("action","/board/get");
											actionForm.submit();

						});
						
					});
</script>

기존의 페이징 처리의 문제점

페이징 처리 후 특정 게시물로 이동한 후 다시 목록으로 돌아가는데 무조건 1페이지의 상태로 돌아가는 문제 발생

 

기존의 페이징 처리의 문제점 대책

조회 페이지로 갈 때 현재 목록 페이지의 pageNum과 amount를 같이 전달해야한다.

이런 경우 페이지 이동에 사용했던 <form> 태그에 추가로 게시물의 번호를 같이 전송하고, action 값을 조정해서 처리할 수 있다.

 

 

링크 직접 처리

기존 처리는 '/board/get?bno=xxx' 로 이동할 수 있는 처리가 직접 처리되어있었다.

<a class='move' href="<c:out value="${board.bno}"/>">
	<c:out value="${board.title}"/>
</a>

직접 링크로 연결된 경로를 페이지 이동과 마찬가지로 폼 태그를 이용해서 처리할 것이므로 a 태그에는 이동하려는 게시물의 번호만을 갖게 수정한다.

(이벤트 처리를 수월하게 하기 위해 a 태그에 class 속성을 move라고 하나 부여한다.)

 

move class 속성에 대한 이벤트 처리 추가

$(".move").on("click",function(e) {
	e.preventDefault();
	actionForm.append("<input type='hidden' name='bno' value='"
				+ $(this).attr("href")
				+ "'>");
	actionForm.attr("action","/board/get");
	actionForm.submit();

});

자바스크립트를 통해 게시물의 제목을 클릭 시 이동하도록 이벤트 처리

게시글 제목을 클릭 시 폼 태그에 추가로 bno 값을 전송하기 위해 input 태그를 만들어 추가하고,

폼 태그의 액션은 '/board/get' 으로 변경한다.

처리가 정상적으로 됐다면, 게시글 제목 클릭 시 pageNum과 amout 파라미터가 추가로 전달되는 것을 알 수 있다.

 

페이지 번호 유지 : 조회 페이지에서 다시 목록 페이지로 이동

 

src/main/java

com.spms.controller

BoardController.java

 

...더보기 
package com.spms.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import com.spms.domain.BoardVO;
import com.spms.domain.Criteria;
import com.spms.domain.PageDTO;
import com.spms.service.BoardService;

import lombok.AllArgsConstructor;
import lombok.extern.log4j.Log4j;

@Controller
@Log4j
@RequestMapping("/board/*")
@AllArgsConstructor
public class BoardController {

	private BoardService boardService;
	
	@GetMapping("/list")
	public void list(Criteria cri, Model model) {
		log.info("list" + cri);
		boardService.getList(cri).forEach(board -> log.info(board));
		model.addAttribute("list", boardService.getList(cri));
		model.addAttribute("pageMaker", new PageDTO(cri, 111));
	}
	
	@GetMapping("/register")
	public void register() {
		
	}
	
	@PostMapping("/register")
	public String register(BoardVO board, RedirectAttributes rttr) {

		log.info("register : " + board);
		boardService.register(board);
		rttr.addFlashAttribute("result", board.getBno());
		return "redirect:/board/list";
	}

	@GetMapping({"/get", "/modify"})
	public void get(@RequestParam("bno") Long bno, @ModelAttribute("cri") Criteria cri , Model model) {
		log.info("/get or modify");
		model.addAttribute("board", boardService.get(bno));
	}

	@PostMapping("/modify")
	public String modify(BoardVO board, RedirectAttributes rttr) {
		log.info("modify:" + board);

		if (boardService.modify(board)) {
			rttr.addFlashAttribute("result", "success");
		}
		return "redirect:/board/list";
	}

	@PostMapping("/remove")
	public String remove(@RequestParam("bno") Long bno, RedirectAttributes rttr) {
		log.info("remove..." + bno);
		if (boardService.remove(bno)) {
			rttr.addFlashAttribute("result", "success");
		}
		return "redirect:/board/list";
	}

}

 

조회페이지에서 다시 목록 페이지로 이동하기 위한 파라미터들이 같이 전송되었다면, 조회 페이지에서 목록으로 이동하기 위한 이벤트를 처리해야한다.

원래 get() 는 게시글의 번호만 받도록 처리되어있었지만, 추가적인 파라미터가 붙으면서 Criteria 를 파라미터로 추가해서 받고나서 전달한다.

views/board

get.jsp

 

...더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<%@ include file="../includes/header.jsp"%>
<div class="row">
	<div class="col-lg-12">
		<h1 class="page-header">게시판 조회</h1>
	</div>
	<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading">게시글 조회 페이지</div>
			<!-- /.panel-heading -->
			<div class="panel-body">
					<div class="form-group">
						<label>글 번호</label>
						<input class="form-control" name="bno" value='<c:out value="${board.bno }"/>' readonly="readonly">
					</div>
					<div class="form-group">
						<label>작성자</label>
						<input class="form-control" name="writer" value='<c:out value="${board.writer }"/>' readonly="readonly">
					</div>
					<div class="form-group">
						<label>제목</label>
						<input class="form-control" name="title" value='<c:out value="${board.title }"/>' readonly="readonly">
					</div>
					<div class="form-group">
						<label>내용</label>
						<textarea class="form-control" rows="10" name="content" readonly="readonly"><c:out value="${board.content}"/></textarea>
					</div>
					
					<button data-oper='modify' class="btn btn-default">수정</button>
					<button data-oper='list' class="btn btn-info">목록</button>
					
					<form id='operForm' action="/board/modify" method="get">
						<input type='hidden' id='bno' name='bno' value='<c:out value="${board.bno}"/>'>
						<input type='hidden' name='pageNum' value='<c:out value="${cri.pageNum}"/>'>
						<input type='hidden' name='amount' value='<c:out value="${cri.amount}"/>'>
					</form>
			</div>
			<!-- /.panel-body -->
		</div>
		<!-- /.panel -->
	</div>
	<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>

<script type="text/javascript">
$(document).ready(function() {

  var operForm = $("#operForm"); 

  $("button[data-oper='modify']").on("click", function(e){

    operForm.attr("action","/board/modify").submit();

  });

  $("button[data-oper='list']").on("click", function(e){

    operForm.find("#bno").remove();
    operForm.attr("action","/board/list")
    operForm.submit();

  });
});
</script>

<!-- /#page-wrapper -->
<%@ include file="../includes/footer.jsp"%>

 

operForm 이라는 폼 태그에 필요한 데이터를 추가해서 이동하도록 수정한다.

cri 라는 이름으로 전달된 Criteria 객체를 이용해서 pageNum과 amount값을 태그로 구성하고, 버튼을 클릭했을 때 정상적으로 목록 페이지로 이동하게 처리한다.

 

 

반응형

'Project B (SPMS) > Project B 파트3' 카테고리의 다른 글

[B -2-23] 페이징 화면 처리 4  (0) 2019.10.03
[B -2-22] 페이징 화면 처리 3  (0) 2019.10.03
[B -2-20] 페이징 화면 처리 1  (0) 2019.10.03
[B -2-19] 마이바티스와 스프링에서의 페이징 처리  (0) 2019.10.03

관련글

댓글 0

티스토리툴바