[Java/Spring] 조건으로 검색 기능 구현하기

▶ 검색타입과 정렬타입/정렬방식을 기준으로 검색하기 

 

검색 폼 화면

---

검색 조건으로 검색 된 화면

 

위의 화면처럼 검색타입과 정렬타입/정렬방식을 기준으로 검색 기능을 구현해보았다.

 

※ 안에 데이터는 테스트용으로 마구잡이로 넣은거라 무시바람 ※

 

• jsp (front)

<form id="searchForm" action="/nfeatures/reportList.do" method="POST" style="margin-bottom: 4%;">
		<input type="hidden" name="searchType">
		
		<input type="hidden" name="currPage" id="currPage" value="${currPage}">
		
		<span>검색</span>
		<select name="kwd" id="searchType" onchange="changeSearchType()">
			<option value="" selected>--전체보기--</option>
			<option value="reportTitle" <c:if test="${reportVO.searchType eq 'reportTitle'}">selected</c:if>>제목</option>
			<option value="reportContent" <c:if test="${reportVO.searchType eq 'reportContent'}">selected</c:if>>내용</option>
		</select>
		<input type="text" name="selectTxt" value="${reportVO.selectTxt}" id="selectTxt">
		<a href="javascript:searchForm();" class="search">검색</a>
		<h3>정렬</h3>
		<select name="orderByType" id="orderByType" onchange="changeSort();">
			<optgroup label="--전체보기--">
				<option value="reportTitle" <c:if test="${reportVO.orderByType eq 'reportTitle' }">selected</c:if>>제목</option>
				<option value="regId" <c:if test="${reportVO.orderByType eq 'regId' }">selected</c:if>>등록자</option>
				<option value="regDt" <c:if test="${reportVO.orderByType eq 'regDt' }">selected</c:if>>등록일</option>
			</optgroup>
		</select>
		<select name="orderBy" id="orderBy"  onchange="changeSort();">
			<optgroup label="--전체보기--">
				<option value="orderByTop" <c:if test="${reportVO.orderBy eq 'orderByTop' }">selected</c:if>>오름차순</option>
				<option value="orderByRow" <c:if test="${reportVO.orderBy eq 'orderByRow' }">selected</c:if>>내림차순</option>
			</optgroup>
		</select>
	</form>

$(function(){
	$("#orderBy option:selected").val();
	$("#orderByType option:selected").val();
		
});

function searchAjax(){
		
	var form = {
		"searchType":$("#searchType").val(),
		"selectTxt":$("#selectTxt").val(),
		"orderByType":$("#orderByType").val(),
		"orderBy":$("#orderBy").val()
	}
		
	console.log(">>>>>>>>>>>"+form);
		
	$.ajax({
		url:"/reportList.do",
		type:"get",
		data: form,
		processData: false,
		contentType: false,
		cache: false,
		error:function(error){
			alert("검색 오류!");
		},
		success: function(data){
			console.log(">>>>>>>>"+data);
			var list = data.reportList;
			listInnerHtml(list);
			return;
		}
		});
	}
    
    function changeSearchType() {
		const searchType = $('#searchType').val();
		document.querySelector('[name=searchType]').value = searchType;
	}
	
	function searchForm(){
		alert("조회시작");
		$('#searchForm').attr({action:"/reportList.do", method:'post'}).submit();		
	}
	
	function changeSort(){
		searchForm();
	}

• searchType : 검색타입
• selectTxt : 검색어
• orderByType : 정렬타입
• orderBy : 정렬방식

 

selected 된 값을 서버단으로 전송 ----> 세 군데 다 onchange()이벤트를 주었다.

주의할 점은 #searchForm의 결과 값을 보내줘야하기때문에 searchForm()과 changeSort()을

동일한 url로 submit해주어야 한다.

 

 

• controller

mv.addObject("reportList", reportService.selectPageReportList(reportVO)); <-- 1
mv.setViewName("/front/frontReportList");
mv.addObject("reportVO", reportVO); <-- 2
System.out.println(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>getOrderBy:"+reportVO.getOrderBy());
System.out.println(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>getOrderByType:"+reportVO.getOrderByType());
return mv;

페이징과 연결되어있는 부분이라 1번이라고 써있는 부분이 페이징된 결과 값을 조회하는 부분이다.

같은 메서드에 2번부분을 추가하여 리턴시켰다.

 

• VO

@Alias("reportVO")
public class ReportVO extends PageVO{
	private Integer reportId;
	private String reportTitle;
	private String reportType;
	private String reportContent;
	private String okayYn;
	private String orderByTop;
	private String orderByRow;
	private String regId;
	private String regIdStr;
	private Date regDt;
	private String regDtStr;
	private String modId;
	private String modIdStr;
	private Date modDt;
	private String modDtStr;
	
	private String startDate;
	private String endDate;
	//검색어
	private String selectTxt;
	//검색타입
	private String searchType;
	//정렬타입
	private String orderByType;
	//정렬 조건1
	private String orderBy;

	List<ReportFileVO> reportFileVOList;
  }

 

mapper.xml 과 디비부분은 아래 링크에 !!

 

2021.11.05 - [분류 전체보기] - [MyBatis/MariaDB] 조건으로 검색 기능 구현하기 2

[MyBatis/MariaDB] 조건으로 검색 기능 구현하기 2