검색 기능(4)

검색 기능은 구현이 되었지만 문제점이 한 가지 있다.
다음 페이지로 넘어갈 시 검색 기능이 저장이 되지 않는다.

페이지네이션 버튼에 검색 값을 저장하는 기능이 필요하다.
이를 자바 스크립트로 구현해보자.

	// pagination_button을 클릭하면 페이지 이동
			$(".pagination_button a").on("click", function(e){
				var listForm = $("#listForm"); // form 객체 참조
				e.preventDefault(); // a 태그 이벤트 방지
			
				var pageNum = $(this).attr("href"); // a태그의 href 값 저장
				// 현재 페이지 사이즈값 저장
				
				var type = "<c:out value='${pageMaker.pagination.type }' />";
				var keyword = "<c:out value='${pageMaker.pagination.keyword }' />";
				 
				// 페이지 번호를 input name='pageNum' 값으로 적용
				listForm.find("input[name='pageNum']").val(pageNum);
				// type 값을 적용
				listForm.find("input[name='type']").val(type);
				// keyword 값을 적용
				listForm.find("input[name='keyword']").val(keyword);
				listForm.submit(); // form 전송
			}); // end on()
			

페이지네이션 버튼을 클릭할 시 실행되는 자바 스크립트다.

listForm은 위의 옵션값을 히든 타입으로 받아와 전달해주는 form 태그이다.
listForm를 살펴보자.

폼 태그의 action과 method가 searchForm과 같다.(지난 포스팅 참조)
searchForm은 MarketController 중 게시글 메인 페이지를 출력하는 부분과 연결이 되어있었다.
listForm 또한 그와 같은 곳에 연결이 되어있다.

listForm이 컨트롤러에서 받아온 값들을 히든 타입으로 input하고,
그렇게 input된 값을 자바스크립트에서 find 후 .val()을 통해 값을 적용 시킨 후 submit을 통해 저장된 값을 전달시킨다.

결과

검색 끝!