스프링 프레임워크

[스프링 프레임워크] 24장 페이징 처리

반응형

 

페이징 처리

 

 

total : 모든 행
size : 행을 몇개씩 나누는지
totalPages : total/size
블록크기 : 한 화면에 몇개씩 보이는지 ex) [1][2][3][4][5]
  - startPage : 블록의 시작점 페이지

페이징 설명 예시

 

 

 

실습

 

 

ArticlePage.java

package kr.or.ddit.utils;

import java.util.List;

public class ArticlePage<T> {
	//전체글 수
	private int total;
	
	// 현재 페이지 번호
	private int currentPage;
	
	// 전체 페이지수 
	private int totalPages;
	
	// 블록의 시작 페이지 번호 ex) [1][2][3] 에서의 1
	private int startPage;
	
	//블록의 종료 페이지 번호 ex) [1][2][3] 에서의 3
	private int endPage;
	
	//검색어
	private String keyword = "";
	
	//요청URL
	private String url = "";
	
	//select 결과 데이터
	private List<T> content;
	
	//페이징 처리
	private String pagingArea = "";
	
	
	//생성자(Constructor) : 페이징 정보를 생성
	//               753            1            10         select결과10행
	public ArticlePage(int total, int currentPage, int size, List<T> content, String keyword) {
		//size : 한 화면에 보여질 목록의 행 수
		this.total = total; //753
		this.currentPage = currentPage; //1
		this.content = content;
		this.keyword = keyword;
		
		//전체글 수가 0이면?
		if(total==0) {
			totalPages = 0;//전체 페이지 수
			startPage = 0;//블록 시작번호
			endPage = 0; //블록 종료번호
		}else {//글이 있다면
			//전체 페이지 수 = 전체글 수 / 한 화면에 보여질 목록의 행 수
			//3 = 31 / 10
			totalPages = total / size;//75
			
			//나머지가 있다면, 페이지를 1 증가
			if(total % size > 0) {//나머지3
			   totalPages++;//76
			}
			
			//페이지 블록 시작번호를 구하는 공식
			// 블록시작번호 = 현재페이지 / 페이지크기 * 페이지크기 + 1
			startPage = currentPage / 5 * 5 + 1;//1
			
			//현재페이지 % 페이지크기 => 0일 때 보정
			if(currentPage % 5 == 0) {
			   startPage -= 5;
			}
			
			//블록종료번호 = 시작페이지번호 + (페이지크기 - 1)
			//[1][2][3][4][5][다음]
			endPage = startPage + (5 - 1);//5
			
			//종료페이지번호 > 전체페이지수
			if(endPage > totalPages) {
			   endPage = totalPages;
			}
		}
		
		pagingArea += "<div class='col-sm-12 col-md-7'>";
		pagingArea += "<div class='dataTables_paginate paging_simple_numbers' id='example2_paginate'>";
		pagingArea += "<ul class='pagination'>";
		pagingArea += "<li class='paginate_button page-item previous "; 
		if(this.startPage<6) {
			pagingArea += "disabled ";
		}
		pagingArea += "'";
		pagingArea += "id='example2_previous'>";
		pagingArea += "<a href='"+this.url+"?currentPage="+(this.startPage-5)+"&keyword="+this.keyword+"' aria-controls='example2' data-dt-idx='0' tabindex='0' ";
		pagingArea += "class='page-link'>Previous</a></li>";
		
		for(int pNo=this.startPage;pNo<=this.endPage;pNo++) {      
		pagingArea += "<li class='paginate_button page-item ";
			if(this.currentPage == pNo) {
				pagingArea += "active";
			}
			pagingArea += "'>";
			pagingArea += "<a href='"+this.url+"?currentPage="+pNo+"&keyword="+this.keyword+"' aria-controls='example2' data-dt-idx='1' tabindex='0' ";
			pagingArea += "class='page-link'>"+pNo+"</a>";
			pagingArea += "</li>";
		}
		pagingArea += "<li class='paginate_button page-item next "; 
		if(this.endPage>=this.totalPages) {
			pagingArea += "disabled";
		}
		pagingArea += "' id='example2_next'><a ";
		pagingArea += "href='"+this.url+"?currentPage="+(this.startPage+5)+"&keyword="+this.keyword+"' aria-controls='example2' data-dt-idx='7' ";
		pagingArea += "tabindex='0' class='page-link'>Next</a></li>";
		pagingArea += "</ul>";
		pagingArea += "</div>";
		pagingArea += "</div>";
	}//end 생성자
	
	public int getTotal() {
		return total;
	}
	
	public void setTotal(int total) {
		this.total = total;
	}
	
	public int getCurrentPage() {
		return currentPage;
	}
	
	public void setCurrentPage(int currentPage) {
		this.currentPage = currentPage;
	}
	
	public int getTotalPages() {
		return totalPages;
	}
	
	public void setTotalPages(int totalPages) {
		this.totalPages = totalPages;
	}
	
	public int getStartPage() {
		return startPage;
	}
	
	public void setStartPage(int startPage) {
		this.startPage = startPage;
	}
	
	public int getEndPage() {
		return endPage;
	}
	
	public void setEndPage(int endPage) {
		this.endPage = endPage;
	}
	
	public String getKeyword() {
		return keyword;
	}
	
	public void setKeyword(String keyword) {
		this.keyword = keyword;
	}
	
	public String getUrl() {
		return url;
	}
	
	public void setUrl(String url) {
		this.url = url;
	}
	
	public List<T> getContent() {
		return content;
	}
	
	public void setContent(List<T> content) {
		this.content = content;
	}
	
	//전체 글의 수가 0인가?
	public boolean hasNoArticles() {
		return this.total == 0;
	}
	
	//데이터가 있나?
	public boolean hasArticles() {
		return this.total > 0;
	}
	
	public void setPagingArea(String pagingArea) {
		this.pagingArea = pagingArea;
	}
	
	//페이징 블록을 자동화
	public String getPagingArea() {
		return this.pagingArea;
	}
}

 

 

LprodService.java

아래에 추가

public int getTotal();

 

 

LprodServiceImpl.java

아래에 추가

//DI, IoC
@Inject
LprodMapper lprodMapper;

@Override
public int getTotal() {
	return this.lprodMapper.getTotal();
}

 

 

LprodMapper.java
interface로 만듬

mapper을 사용했기에 root-context.xml에 설정해야함.

더보기

root-context.xml 설정

</beans>위에 추가

	<!-- Mapper 인터페이스 설정 
	개발자가 직접 DAO를 설정하지 않아도
	자동으로 Mapper 인터페이스를 활용하는 객체를 생성하게 됨
	.별별. => (중첩된)패키지 하위의 모든 것
   -->
   <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
      <property name="basePackage" value="kr.or.ddit.**.mapper" />
   </bean>
package kr.or.ddit.mapper;

import java.util.List;
import java.util.Map;

import kr.or.ddit.vo.LprodVO;
import kr.or.ddit.vo.ProductVO;

public interface LprodMapper {

	//전체 행의 수
	public int getTotal();

	public int createPost(LprodVO lprodVO);

	// 상품 분류 목록
	public List<LprodVO> list(Map<String, Object> map);

	// 상품 분류 상세
	public LprodVO detail(LprodVO lprodVO);

	// 상품 분류 수정
	public int updatePost(LprodVO lprodVO);

	// 상품 분류 삭제
	public int deletePost(LprodVO lpordVO);

	public int getLprodId();

	public int insertProduct(ProductVO productVO);
}

 

 

lprod2_SQL.xml

list 부분 수정 및 where 생성

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="lprod">

	<!-- LprodVO(lprodId=14, lprodGu=P501, lprodNm=분식류) -->
	<insert id="createPost" parameterType="lprodVO">
		insert into lprod(lprod_id,lprod_gu,lprod_nm)
		values(#{lprodId},#{lprodGu},#{lprodNm})
	</insert>
	
	<select id="list" resultType="lprodVO" parameterType="hashMap">
		WITH U AS(
		    SELECT ROW_NUMBER() OVER(ORDER BY LPROD_ID DESC) RNUM
		                ,  T.*
		    FROM
		    (
		        SELECT LPROD_ID, LPROD_GU, LPROD_NM
		        FROM   LPROD
		        WHERE  1 = 1
		        <include refid="where"></include>
		    ) T
		)
		SELECT U.*
		FROM     U
		WHERE U.RNUM BETWEEN ((1 * 10)-(10-1)) AND (1 * 10)
	</select>
	
	<sql id="where">
		AND (LPROD_ID 	LIKE '%' || #{keyword} || '%' 
			OR LPROD_GU	LIKE '%' || #{keyword} || '%'
			OR LPROD_NM LIKE '%' || #{keyword} || '%')
	</sql>
	
	
	<!-- LPROD : 1 -->
	<!-- DB영역과 Java의 영역을 서로 매핑하는 역할을 함 -->
	<resultMap type="lprodVO" id="lprodMap">
		<result property="lprodId" column="LPROD_ID"/>
		<result property="lprodGu" column="LPROD_GU"/>
		<result property="lprodNm" column="LPROD_NM"/>
		<!-- 1:N이기에 collection 사용 -->
		<collection property="productVOList" resultMap="productMap"></collection>
	</resultMap>
	
	<!-- PRODUCT : N -->
	<resultMap type="productVO" id="productMap">
		<result property="productId" column="PRODUCT_ID"/>
		<result property="pname" column="PNAME"/>
		<result property="unitPrice" column="UNIT_PRICE"/>
		<result property="description" column="DESCRIPTION"/>
		<result property="manufacturer" column="MANUFACTURER"/>
		<result property="category" column="CATEGORY"/>
		<result property="unitsInStock" column="UNITS_IN_STOCK"/>
		<result property="condition" column="CONDITION"/>
		<result property="filename" column="FILENAME"/>
		<result property="quantity" column="QUANTITY"/>
	</resultMap>
	
	<!-- PRODUCT : N -->
	<!-- join을 했기에 resultMap을 사용 -->
	<select id="detail" parameterType="lprodVO" resultMap="lprodMap">
		SELECT A.LPROD_ID, A.LPROD_GU, A.LPROD_NM,
		    B.PRODUCT_ID, B.PNAME, B.UNIT_PRICE, B.DESCRIPTION, B.MANUFACTURER,
		    B.CATEGORY, B.UNITS_IN_STOCK, B.CONDITION, B.FILENAME, B.QUANTITY
		FROM     LPROD A LEFT OUTER JOIN PRODUCT B ON(A.LPROD_GU = SUBSTR(B.PRODUCT_ID,1,4))
		WHERE  A.LPROD_GU = #{lprodGu}
	</select>
	
	<update id="updatePost" parameterType="lprodVO">
		UPDATE LPROD
		SET LPROD_ID=#{lprodId}, LPROD_NM=#{lprodNm}
		WHERE LPROD_GU=#{lprodGu}		
	</update>
	
	<delete id="deletePost" parameterType="lprodVO">
		DELETE FROM LPROD 
		WHERE LPROD_GU = #{lprodGu}
	</delete>
	
	<select id="getLprodId" resultType="Integer">
		SELECT MAX(LPROD_ID)+1
		FROM LPROD
	</select>
	
	<insert id="insertProduct" parameterType="productVO">
		INSERT INTO PRODUCT(PRODUCT_ID, PNAME, UNIT_PRICE)
		VALUES(#{productId}, #{pname}, #{unitPrice})
	</insert>
</mapper>

 

결과 화면1

 

 

 

  • 페이징 추가

 

 

LprodController.java

map.put("currentPage",currentPage) 추가

package kr.or.ddit.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.validation.ObjectError;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import kr.or.ddit.service.LprodService;
import kr.or.ddit.utils.ArticlePage;
import kr.or.ddit.vo.LprodVO;
import kr.or.ddit.vo.ProductVO;
import lombok.extern.slf4j.Slf4j;

/*
Controller 어노테이션
스프링 프레임워크에게 "이 클래스는 웹 브라우저의 요청(request)를
받아들이는 컨트롤러야" 라고 알려주는 것임.
스프링은 servlet-context.xml의 context:component-scan의 설정에 의해
이 클래스를 자바빈 객체로 등록(메모리에 바인딩).
*/
//스프링 프레임워크에게 "이 클래스는 컨트롤러야"라고 알려주자
@Slf4j
@RequestMapping("/lprod")
@Controller
public class LprodController {
	
	//DI(의존성 주입) / IoC(제어의 역전)
	@Autowired
	LprodService lprodService;
	
	/*
	요청URI : /lprod/list or /lprod/list?currentPage=2 or /lprod/list?currentPage=
	요청파라미터 : {keyword=개똥이}
	요청방식 : get
	*/
	@RequestMapping(value="/list", method=RequestMethod.GET)
	public ModelAndView list(ModelAndView mav, 
					@RequestParam(value="currentPage", required=false, defaultValue="1") int currentPage, 
					@RequestParam(value="keyword",required=false,defaultValue="") String keyword) {
		log.info("list에 왔다");
		log.info("keyword : " + keyword);
		
		Map<String,Object> map = new HashMap<String,Object>();
		map.put("keyword",keyword);
		map.put("currentPage",currentPage);
		
		//전체 행의 수
		int total = this.lprodService.getTotal();
		log.info("list->total : " + total);
		
		//Model(데이터)
		//상품분류 목록
		List<LprodVO> lprodVOList = this.lprodService.list(map);
		log.info("list->lprodVOList : " + lprodVOList);
		
		
		mav.addObject("articlePage", new ArticlePage<LprodVO>(total, currentPage, 10, lprodVOList, keyword));
		
		//View(jsp)
		mav.setViewName("lprod/list");
		
		return mav;
	}
}

 

 

list.jsp

하단에 추가

	
	<hr />

	<div class="col-sm-12 col-md-7">
		<div class="dataTables_paginate paging_simple_numbers"
			id="example2_paginate">
			<ul class="pagination">
				<li class="paginate_button page-item previous disabled"
					id="example2_previous"><a href="#" aria-controls="example2"
					data-dt-idx="0" tabindex="0" class="page-link">Previous</a></li>
				<li class="paginate_button page-item active"><a href="/lprod/list?currentPage=1"
					aria-controls="example2" data-dt-idx="1" tabindex="0"
					class="page-link">1</a></li>
				<li class="paginate_button page-item "><a href="/lprod/list?currentPage=2"
					aria-controls="example2" data-dt-idx="2" tabindex="0"
					class="page-link">2</a></li>
				<li class="paginate_button page-item "><a href="/lprod/list?currentPage=3"
					aria-controls="example2" data-dt-idx="3" tabindex="0"
					class="page-link">3</a></li>
				<li class="paginate_button page-item "><a href="/lprod/list?currentPage=4"
					aria-controls="example2" data-dt-idx="4" tabindex="0"
					class="page-link">4</a></li>
				<li class="paginate_button page-item "><a href="/lprod/list?currentPage=5"
					aria-controls="example2" data-dt-idx="5" tabindex="0"
					class="page-link">5</a></li>
					
				<li class="paginate_button page-item next" id="example2_next"><a
					href="#" aria-controls="example2" data-dt-idx="7" tabindex="0"
					class="page-link">Next</a></li>
			</ul>
		</div>
	</div>

 

결과 화면2 : 페이지 이동은 되지만 1이 고정으로 표시됨

 

 

 

  • 페이지에 따라 표시되게 변경

list.jsp

변경

	<hr />

	<div class="col-sm-12 col-md-7">
		<div class="dataTables_paginate paging_simple_numbers"
			id="example2_paginate">
			<ul class="pagination">
				<li class="paginate_button page-item previous disabled"
					id="example2_previous"><a href="#" aria-controls="example2"
					data-dt-idx="0" tabindex="0" class="page-link">Previous</a></li>
				<c:forEach var="pNo" begin="${articlePage.startPage}" end="${articlePage.endPage}">
					<li class="paginate_button page-item 
								<c:if test="${pNo==param.currentPage}">active</c:if>
							"><a href="/lprod/list?currentPage=${pNo}"
						aria-controls="example2" data-dt-idx="1" tabindex="0"
						class="page-link">${pNo}</a></li>
				</c:forEach>
					
				<li class="paginate_button page-item next" id="example2_next"><a
					href="#" aria-controls="example2" data-dt-idx="7" tabindex="0"
					class="page-link">Next</a></li>
			</ul>
		</div>
	</div>

 

결과 화면3

 

 

 

  • Next 기능 적용

list.jsp

Next 부분 수정 + 제일 마지막에서 Next를 막음

<li class="paginate_button page-item next
    <c:if test="${articlePage.endPage==articlePage.totalPages}">disabled</c:if>
" id="example2_next"><a
    href="/lprod/list?currentPage=${articlePage.startPage+5}" aria-controls="example2" data-dt-idx="7" tabindex="0"
    class="page-link">Next</a></li>

 

결과 화면4

 

 

 

  • 이전 페이지 이동 기능 추가

list.jsp

가장 첫 페이지일 경우 제외

<li class="paginate_button page-item previous 
        <c:if test="${articlePage.startPage < 6}"> disabled </c:if>
    "
    id="example2_previous"><a href="/lprod/list?currentPage=${articlePage.startPage-5}" aria-controls="example2"
    data-dt-idx="0" tabindex="0" class="page-link">Previous</a></li>

 

결과 화면5

 

 

 

  • 대체

list.jsp

	<hr />
	<!-- EL태그 정리 
	== : eq(equal)
	!= : ne(not equal)
	<  : lt(less than)
	>  : gt(greater than)
	<= : le(less equal)
	>= : ge(greater equal)
	-->
	<div class="row">
		<div class="col-sm-12 col-md-7">
			<div class="dataTables_paginate paging_simple_numbers"
				id="example2_paginate">
				<ul class="pagination">
					<li class="paginate_button page-item previous 
							<c:if test="${articlePage.startPage < 6}"> disabled </c:if>
						"
						id="example2_previous"><a href="/lprod/list?currentPage=${articlePage.startPage-5}" aria-controls="example2"
						data-dt-idx="0" tabindex="0" class="page-link">Previous</a></li>
					<c:forEach var="pNo" begin="${articlePage.startPage}" end="${articlePage.endPage}">
						<li class="paginate_button page-item 
									<c:if test="${pNo==param.currentPage}">active</c:if>
								"><a href="/lprod/list?currentPage=${pNo}"
							aria-controls="example2" data-dt-idx="1" tabindex="0"
							class="page-link">${pNo}</a></li>
					</c:forEach>
						
					<li class="paginate_button page-item next
						<c:if test="${articlePage.endPage==articlePage.totalPages}">disabled</c:if>
					" id="example2_next"><a
						href="/lprod/list?currentPage=${articlePage.startPage+5}" aria-controls="example2" data-dt-idx="7" tabindex="0"
						class="page-link">Next</a></li>
				</ul>
			</div>
		</div>
	</div>

 

위의 작성한 최종본을 아래와 대체 가능하다

 

 

	<hr />
	<!-- EL태그 정리 
	== : eq(equal)
	!= : ne(not equal)
	<  : lt(less than)
	>  : gt(greater than)
	<= : le(less equal)
	>= : ge(greater equal)
	-->
	<div class="row">
		${articlePage.pagingArea}
	</div>

 

 

 

  • 검색 기능 추가

LprodController.java

package kr.or.ddit.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.validation.ObjectError;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import kr.or.ddit.service.LprodService;
import kr.or.ddit.utils.ArticlePage;
import kr.or.ddit.vo.LprodVO;
import kr.or.ddit.vo.ProductVO;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@RequestMapping("/lprod")
@Controller
public class LprodController {
	
	//DI(의존성 주입) / IoC(제어의 역전)
	@Autowired
	LprodService lprodService;
	
	/*
	요청URI : /lprod/list or /lprod/list?currentPage=2 or /lprod/list?currentPage=
	요청파라미터 : {keyword=개똥이}
	요청방식 : get
	*/
	@RequestMapping(value="/list", method=RequestMethod.GET)
	public ModelAndView list(ModelAndView mav, 
					@RequestParam(value="currentPage", required=false, defaultValue="1") int currentPage, 
					@RequestParam(value="keyword",required=false,defaultValue="") String keyword) {
		log.info("list에 왔다");
		log.info("keyword : " + keyword);
		
		Map<String,Object> map = new HashMap<String,Object>();
		map.put("keyword",keyword);
		map.put("currentPage",currentPage);
		
		//전체 행의 수
		int total = this.lprodService.getTotal(map);
		log.info("list->total : " + total);
		
		//Model(데이터)
		//상품분류 목록
		List<LprodVO> lprodVOList = this.lprodService.list(map);
		log.info("list->lprodVOList : " + lprodVOList);
		
		
		mav.addObject("articlePage", new ArticlePage<LprodVO>(total, currentPage, 10, lprodVOList, keyword));
		
		//View(jsp)
		mav.setViewName("lprod/list");
		
		return mav;
	}
}

 

 

LprodServiceImpl.java

package kr.or.ddit.service.impl;

import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
import java.util.Map;
import java.util.UUID;

import javax.inject.Inject;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import kr.or.ddit.dao.AttachDao;
import kr.or.ddit.dao.LprodDao;
import kr.or.ddit.mapper.LprodMapper;
import kr.or.ddit.service.LprodService;
import kr.or.ddit.vo.AttachVO;
import kr.or.ddit.vo.LprodVO;
import kr.or.ddit.vo.ProductVO;
import lombok.extern.slf4j.Slf4j;

@Service
@Slf4j
public class LprodServiceImpl implements LprodService {

	//데이터베이스 접근을 위해 LprodDao 인스턴스를 주입받자
	//DI(Dependency Injection):의존성 주입
	//IoC(Inversion of Control):제어의 역전
	@Autowired
	LprodDao lprodDao;
	
	//어디에 업로드? root-context.xml에 적어둠
	@Autowired
	String uploadFolder;
	
	@Autowired
	AttachDao attachDao;
	
	//DI, IoC
	@Inject
	LprodMapper lprodMapper;
	
	@Override
	public int getTotal(Map<String, Object> map) {
		return this.lprodMapper.getTotal(map);
	}
}

 

 

LprodMapper.java

package kr.or.ddit.mapper;

import java.util.List;
import java.util.Map;

import kr.or.ddit.vo.LprodVO;
import kr.or.ddit.vo.ProductVO;

public interface LprodMapper {

	//전체 행의 수
	public int getTotal(Map<String, Object> map);
}

 

 

lprod2_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="kr.or.ddit.mapper.LprodMapper">

	<sql id="where">
		AND (LPROD_ID 	LIKE '%' || #{keyword} || '%' 
			OR LPROD_GU	LIKE '%' || #{keyword} || '%'
			OR LPROD_NM LIKE '%' || #{keyword} || '%')
	</sql>
	
	<select id="list" resultType="lprodVO" parameterType="hashMap">
		WITH U AS(
		    SELECT ROW_NUMBER() OVER(ORDER BY LPROD_ID DESC) RNUM
		                ,  T.*
		    FROM
		    (
		        SELECT LPROD_ID, LPROD_GU, LPROD_NM
		        FROM   LPROD
		        WHERE  1 = 1
		        <include refid="where"></include>
		    ) T
		)
		SELECT U.*
		FROM     U
		WHERE U.RNUM BETWEEN ((1 * 10)-(10-1)) AND (1 * 10)
	</select>
	
	<!-- 전체 행의 수
	public int getTotal() -->
	<select id="getTotal" parameterType="hashMap" resultType="int">
		SELECT COUNT(*)
		FROM LPROD
		WHERE 1 = 1
		<include refid="where"></include>
	</select>
</mapper>

 

결과 화면6 : U7로 검색

 

 

 

  • 페이징 처리 및 비동기로 검색 처리

ArticlePage.java

package kr.or.ddit.utils;

import java.util.List;

public class ArticlePage<T> {
	//전체글 수
	private int total;
	
	// 현재 페이지 번호
	private int currentPage;
	
	// 전체 페이지수 
	private int totalPages;
	
	// 블록의 시작 페이지 번호 ex) [1][2][3] 에서의 1
	private int startPage;
	
	//블록의 종료 페이지 번호 ex) [1][2][3] 에서의 3
	private int endPage;
	
	//검색어
	private String keyword = "";
	
	//요청URL
	private String url = "";
	
	//select 결과 데이터
	private List<T> content;
	
	//페이징 처리
	private String pagingArea = "";
	
	
	//생성자(Constructor) : 페이징 정보를 생성
	//               753            1            10         select결과10행
	public ArticlePage(int total, int currentPage, int size, List<T> content, String keyword) {
		//size : 한 화면에 보여질 목록의 행 수
		this.total = total; //753
		this.currentPage = currentPage; //1
		this.content = content;
		this.keyword = keyword;
		
		//전체글 수가 0이면?
		if(total==0) {
			totalPages = 0;//전체 페이지 수
			startPage = 0;//블록 시작번호
			endPage = 0; //블록 종료번호
		}else {//글이 있다면
			//전체 페이지 수 = 전체글 수 / 한 화면에 보여질 목록의 행 수
			//3 = 31 / 10
			totalPages = total / size;//75
			
			//나머지가 있다면, 페이지를 1 증가
			if(total % size > 0) {//나머지3
			   totalPages++;//76
			}
			
			//페이지 블록 시작번호를 구하는 공식
			// 블록시작번호 = 현재페이지 / 페이지크기 * 페이지크기 + 1
			startPage = currentPage / 5 * 5 + 1;//1
			
			//현재페이지 % 페이지크기 => 0일 때 보정
			if(currentPage % 5 == 0) {
			   startPage -= 5;
			}
			
			//블록종료번호 = 시작페이지번호 + (페이지크기 - 1)
			//[1][2][3][4][5][다음]
			endPage = startPage + (5 - 1);//5
			
			//종료페이지번호 > 전체페이지수
			if(endPage > totalPages) {
			   endPage = totalPages;
			}
		}
		
		pagingArea += "<div class='col-sm-12 col-md-7'>";
		pagingArea += "<div class='dataTables_paginate paging_simple_numbers' id='example2_paginate'>";
		pagingArea += "<ul class='pagination'>";
		pagingArea += "<li class='paginate_button page-item previous "; 
		if(this.startPage<6) {
			pagingArea += "disabled ";
		}
		pagingArea += "'";
		pagingArea += "id='example2_previous'>";
		pagingArea += "<a href='"+this.url+"?currentPage="+(this.startPage-5)+"&keyword="+this.keyword+"' aria-controls='example2' data-dt-idx='0' tabindex='0' ";
		pagingArea += "class='page-link'>Previous</a></li>";
		
		for(int pNo=this.startPage;pNo<=this.endPage;pNo++) {      
		pagingArea += "<li class='paginate_button page-item ";
			if(this.currentPage == pNo) {
				pagingArea += "active";
			}
			pagingArea += "'>";
			pagingArea += "<a href='"+this.url+"?currentPage="+pNo+"&keyword="+this.keyword+"' aria-controls='example2' data-dt-idx='1' tabindex='0' ";
			pagingArea += "class='page-link'>"+pNo+"</a>";
			pagingArea += "</li>";
		}
		pagingArea += "<li class='paginate_button page-item next "; 
		if(this.endPage>=this.totalPages) {
			pagingArea += "disabled";
		}
		pagingArea += "' id='example2_next'><a ";
		pagingArea += "href='"+this.url+"?currentPage="+(this.startPage+5)+"&keyword="+this.keyword+"' aria-controls='example2' data-dt-idx='7' ";
		pagingArea += "tabindex='0' class='page-link'>Next</a></li>";
		pagingArea += "</ul>";
		pagingArea += "</div>";
		pagingArea += "</div>";
	}//end 생성자
	
	public int getTotal() {
		return total;
	}
	
	public void setTotal(int total) {
		this.total = total;
	}
	
	public int getCurrentPage() {
		return currentPage;
	}
	
	public void setCurrentPage(int currentPage) {
		this.currentPage = currentPage;
	}
	
	public int getTotalPages() {
		return totalPages;
	}
	
	public void setTotalPages(int totalPages) {
		this.totalPages = totalPages;
	}
	
	public int getStartPage() {
		return startPage;
	}
	
	public void setStartPage(int startPage) {
		this.startPage = startPage;
	}
	
	public int getEndPage() {
		return endPage;
	}
	
	public void setEndPage(int endPage) {
		this.endPage = endPage;
	}
	
	public String getKeyword() {
		return keyword;
	}
	
	public void setKeyword(String keyword) {
		this.keyword = keyword;
	}
	
	public String getUrl() {
		return url;
	}
	
	public void setUrl(String url) {
		this.url = url;
	}
	
	public List<T> getContent() {
		return content;
	}
	
	public void setContent(List<T> content) {
		this.content = content;
	}
	
	//전체 글의 수가 0인가?
	public boolean hasNoArticles() {
		return this.total == 0;
	}
	
	//데이터가 있나?
	public boolean hasArticles() {
		return this.total > 0;
	}
	
	public void setPagingArea(String pagingArea) {
		this.pagingArea = pagingArea;
	}
	
	//페이징 블록을 자동화
	public String getPagingArea() {
		return this.pagingArea;
	}
}

 

 

BookController.java

currentPage추가

package kr.or.ddit.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;


import kr.or.ddit.service.BookService;
import kr.or.ddit.utils.ArticlePage;
import kr.or.ddit.vo.BookVO;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@Controller
public class BookController {
	
	@Autowired
	BookService bookService;
	
	/*
	요청URI : /list?keyword=알탄 or /list or /list?keyword=
	요청파라미터 : keyword=알탄 or 없음
	요청방식 : get
	
	required=false : 선택사항. 파라미터가 없어도 무관
	*/
	@RequestMapping(value="/list", method=RequestMethod.GET)
	public ModelAndView list(ModelAndView mav, 
			@RequestParam(value="currentPage",required=false,defaultValue="1") int currentPage,
			@RequestParam(value="keyword",required=false,defaultValue="") String keyword) {
		log.info("list에 왔다");
		log.info("list->keyword : " + keyword);
		
		//map{"keyword":"알탄"}
		Map<String,Object> map = new HashMap<String,Object>();
		map.put("keyword", keyword);
		map.put("currentPage", currentPage);
		
		
		//도서 전체 행수
		int total = this.bookService.getTotal(map);
		log.info("list->total : " + total);
		
		
		//도서 목록 map{"keyword":"알탄"}
		List<BookVO> bookVOList = this.bookService.list(map);
		log.info("list->bookVOList : " + bookVOList);
		
		//Model : 데이터
		mav.addObject("articlePage", new ArticlePage<BookVO>(total, currentPage, 10, bookVOList, keyword));
		
		//View : jsp
		//forwarding : 데이터가 넘어감
		mav.setViewName("book/list");
		
		return mav;
	}
	
	/*
	요청URI : /listAjax
	요청파라미터(JSON->String) : {keyword:알탄} or {keyword:""}
	요청방식 : post
	 */
	@ResponseBody
	@RequestMapping(value="/listAjax", method=RequestMethod.POST)
	public ArticlePage<BookVO> listAjax(@RequestBody Map<String,Object> map) {
		log.info("list에 왔다");
		log.info("list->map : " + map);
		
		//map{"keyword":"알탄","currentPage":1}
		//map.put("keyword", keyword);
		
		int total = this.bookService.getTotal(map);
		log.info("listAjax -> total : " + total);
		
		//도서 목록 map{"keyword":"알탄"}
		List<BookVO> bookVOList = this.bookService.list(map);
		log.info("list->bookVOList : " + bookVOList);
		
		return new ArticlePage(total, Integer.parseInt(map.get("currentPage").toString()), 10, bookVOList, map.get("keyword").toString());
	}
}

 

 

BookService.java

전체 게시글 조회 추가

package kr.or.ddit.service;

import java.util.List;
import java.util.Map;

import kr.or.ddit.vo.BookVO;

public interface BookService {
	
	public int getTotal(Map<String, Object> map);
}

 

 

BookServiceImpl.java

전체 게시글 조회 추가

package kr.or.ddit.service.impl;

import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
import java.util.Map;
import java.util.UUID;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import kr.or.ddit.dao.AttachDao;
import kr.or.ddit.dao.BookDao;
import kr.or.ddit.service.BookService;
import kr.or.ddit.utils.UploadController;
import kr.or.ddit.vo.AttachVO;
import kr.or.ddit.vo.BookVO;
import lombok.extern.slf4j.Slf4j;

@Service
@Slf4j
public class BookServiceImpl implements BookService{

	@Autowired
	UploadController uploadController;
	
	@Autowired
	BookDao bookDao;
	
	@Autowired
	String uploadFolder;
	
	@Autowired
	AttachDao attachDao;
	
	// 도서 목록
	@Override
	public List<BookVO> list(Map<String, Object> map) {
		return this.bookDao.list(map);
	}
    
	@Override
	public int getTotal(Map<String, Object> map) {
		return this.bookDao.getTotal(map);
	}

}

 

 

BookDao.java

전체 게시글 조회 추가

package kr.or.ddit.dao;

import java.util.List;
import java.util.Map;

import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import kr.or.ddit.vo.BookVO;

@Repository
public class BookDao {

	@Autowired
	SqlSessionTemplate sqlSessionTemplate;
	
	//도서 목록
	public List<BookVO> list(Map<String, Object> map) {
		//.selectList("namespace.id",파라미터)
		return this.sqlSessionTemplate.selectList("book.list",map);
	}
    
	public int getTotal(Map<String, Object> map) {
		return this.sqlSessionTemplate.selectOne("book.getTotal", map);
	}

}

 

 

book_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="book">
	<sql id="where">
		<if test="keyword!=null and keyword!=''">
			AND (TITLE 		LIKE '%' || #{keyword} || '%' 
				OR CATEGORY LIKE '%' || #{keyword} || '%'
				OR PRICE 	LIKE '%' || #{keyword} || '%')
		</if>
	</sql>
	
	<!-- 도서 목록
	where 1 = 1은 늘 참임. 
	조건이 2개 이상일 때 WHERE + AND
	조건이 1개일 때 WHERE이어야 함. 
		WHERE(생략) 
		AND   => 오류 발생
		==>
		WHERE 1 = 1
		AND(생략)
		AND => 정상
		
		True and True  = True
		True and False = False
		
		keyword : "알탄" (/list?keyword=알탄)
		keyword : ""  (/list?keyword=)
	-->
	<!-- bookVO의 값으로 매핑되게 작업해놓음 -->
	<select id="list" resultType="bookVO" parameterType="hashMap">
		SELECT T.*
		FROM
		(
		    SELECT ROW_NUMBER() OVER(ORDER BY BOOK_ID DESC) RNUM
		        , BOOK_ID, TITLE, CATEGORY, PRICE, INSERT_DATE
		    FROM BOOK
		    WHERE 1=1
		    <include refid="where"></include>
		) T
		WHERE T.RNUM BETWEEN ((#{currentPage} * 10) - (10 - 1)) AND (#{currentPage} * 10)
	</select>
	
	<!-- 도서 전체 행수 -->
	<select id="getTotal" parameterType="hashMap" resultType="int">
		SELECT COUNT(*)
		FROM BOOK
		WHERE 1 = 1
		<include refid="where"></include>
	</select>
	
</mapper>

 

 

list.jsp

ajax 변경 및 페이징 추가

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<title>도서 목록</title>
<script type="text/javascript">
$(function(){
	$("#btnSearch").on("click",function(){
		let keyword = $("input[name='keyword']").val();
		
		//json오브젝트
		let data = {
			"keyword":keyword
		};
		
		console.log("data : ", data);
		
 		//$(this).parent().submit();
 		//새롭게 검색 : 1페이지로 초기화
		getList(keyword,1);
	});
	
	// 전체 보기
	$("#btnSearchAll").on("click",function(){
		getList("",1);
	});
	
	
	// 목록 함수 호출
// 	getList("");
});

// 목록
function getList(keyword, currentPage) {
	
	// JSON 오브젝트
	let data = {
		"keyword":keyword,
		"currentPage":currentPage
	};
	// data : {"keyword":"알탄","currentPage":"1"}
	console.log("data : ", data);
	
	//아작나써유..(피)씨다타써...
	$.ajax({
		url: "/listAjax",
		contentType:"application/json;charset=utf-8",
		data:JSON.stringify(data),
		type:"post",
		dataType:"json",
		success:function(result){
			// result : articlePage
			// result.content : List<BookVO>
			console.log("result.content : ", result.content);
			
			let str = "";
			
			$.each(result.content, function(idx, bookVO){
				str += "<tr>";
				str += "<td>" + (idx+1) + "</td>";
				str += "<td><a href='/detail?bookId=" + bookVO.bookId + "'>" + bookVO.title + "</a></td>";
				str += "<td>" + bookVO.category + "</td>";
				str += "<td>" + bookVO.price + "원</td>";
				str += "</tr>";
			});
			
			$(".clsPagingArea").html(result.pagingArea);
			
			$("#trShow").html(str);
		}
	});
}

</script>
</head>
<body>
<h3>도서 목록</h3>
<p>
	<form>
		<input type="text" name="keyword" value="" placeholder="검색어를 입력하세요"/>
		<!-- submit / button / reset -->
		<button type="button" id="btnSearch">검색</button>
		<button type="button" id="btnSearchAll">전체보기</button>
	</form>
	<a href="/create">도서 등록</a>
</p>

<table border="1">
	<thead>
		<tr>
			<th>번호</th><th>제목</th><th>카테고리</th><th>가격</th>
		</tr>
	</thead>
	<tbody id="trShow">
		<!-- data : mav.addObject("articlePage", 페이지네이션객체); -->
		<!-- articlePage.content => List<BookVO> -->
		<!-- row : bookVO 1행 -->
		<c:forEach var="bookVO" items="${articlePage.content}" varStatus="stat">
			<tr>
				<td>${bookVO.rnum}</td>
				<td><a href="/detail?bookId=${bookVO.bookId}">${bookVO.title}</a></td>
				<td>${bookVO.category}</td>
				<td><fmt:formatNumber value="${bookVO.price}" pattern="#,###" />원</td>
			</tr>
		</c:forEach>
	</tbody>
</table>

<hr />
<div class="row clsPagingArea">
	${articlePage.pagingArea}
</div>

</body>
</html>

 

결과 화면7

 

 

반응형

'스프링 프레임워크' 카테고리의 다른 글

[스프링 프레임워크] 26장 트랙잭션, 예외처리  (0) 2024.05.16
[스프링 프레임워크] 25장 AOP  (0) 2024.05.16
[스프링 프레임워크] 23장 숨겨진 필드요소, 라벨요소, 입력값 검증  (0) 2024.05.13
[스프링 프레임워크] 22장 공통 코드로 관리  (0) 2024.05.10
[스프링 프레임워크] 21장 스프링 폼 태그 라이브러리  (0) 2024.05.10

티스토리툴바