깜놀하는 해므찌로

Egov Spring 목록 버튼 누를 시 검색어, 검색 조건, 게시판 종류 기억하고 리스트로 돌아가기 본문

IT

Egov Spring 목록 버튼 누를 시 검색어, 검색 조건, 게시판 종류 기억하고 리스트로 돌아가기

agnusdei1207 2022. 7. 15. 07:35
반응형
SMALL

목록 버튼 클릭 시
게시판 종류 / 검색 조건 / 검색어 저장

<form name="defaultFrm" id="defaultFrm" method="post">           
	<%-- 게시판 구분 --%>                   
	<input type="hidden" name="schEtc02" id="schEtc02" value="${searchVO.schEtc02 }"> 
	<%-- 페이지 인덱스  --%>               
	<input type="hidden" id="pageIndex" name="pageIndex" value="${searchVO.pageIndex}"/>
	<%-- 검색어 --%>    
	<input type="hidden" name="searchKeyword" id="searchKeyword" value="${searchVO.searchKeyword }">  
	<%-- 검색 조건 --%>
	<input type="hidden" name="searchCondition" id="searchCondition" value="${searchVO.searchCondition }">  
</form>

1. 페이지 최 상단 <form> 태그 내에 저장할 값 hidden 설정

2. 해당 페이지를 붙일 때 컨트롤러에서 값을 받아올 수 있도록 JSTL value 값 설정

<strong class="tit hideBtn3" style="margin-left:-20px;font-size: 15px;">검색</strong>						
<select title="구분 선택" id="searchSelect" class="selec hideBtn3" style="width:132px;">  
    <option value="0" >전체</option>
    <option value="1" >제목</option> 
    <option value="2" >내용</option>      
</select>               
<input type="text" id="searchWord" class="text w85p hideBtn3" style="width:633px;" />

<button type="button" class="btn btn_search" onclick="search();">검색</button>

3. 검색 조건 및 검색어 id 값 설정

4. 검색 onclick 함수 달기

$(function(){            
	<%-- 목록 버튼 누를 시 검색햤던 조회 기록 유지 --%>        
	$("#searchWord").val($("#searchKeyword").val());
	if($("#searchCondition").val()){
    		<%-- 검색 조건 selected --%>
		$("#searchSelect").val($("#searchCondition").val()).prop("selected", true);
	}
	fncPageBoard('addList','addList.do', '${searchVO.pageIndex}'); 
});       
      
<%-- 검색 버튼 엔터 감지 --%>                           
$("#searchWord").keypress(function(e){      
	if (e.keyCode == 13) { 
		$("#searchCondition").val($("#searchSelect").val());  
		$("#searchKeyword").val($("#searchWord").val());
		fncPageBoard('addList','addList.do', '1');   
	 }
});         
<%-- 검색 버튼 --%>
function search(){     
	$("#searchCondition").val($("#searchSelect").val());
	$("#searchKeyword").val($("#searchWord").val());
	fncPageBoard('addList','addList.do', '1');
}

3. 검색 버튼을 클릭했을 때 값을 최상단의 hidden 으로 보내기

4. 검색 버튼을 눌렀을 시점과 페이지가 첫 로드됐을 때 함수 구분하여 선언

5. 목록 버튼을 눌렀을 시 마찬가지로 페이지가 로드되므로 컨트롤러로부터 받은 검색조건, 검색어 등 값들을 JSTL 로 설정

6. 검색 조건의 경우 <select> 태그를 사용함으로 검색 조건 값을 selected 하도록 설정

반응형
LIST