[Spring+mybatis+thymeleaf] get 방식 검색 조건 여러 개일 때 페이징 처리 값 넘겨주기

view에서 get 방식으로 파라미터를 controller로 넘기는데

검색 조건 input text, number, checkbox, datePicker(라이브러리)까지

form으로 한 번에 넘겼는데 페이징 처리를 하려고 하니까 갑자기 막막해졌다.

​

페이지 번호를 누르면 이동하는 링크를 입력해주려는데 검색 조건이 너무 많아 하나하나 다 써야하는지..

아니면 form 두개를 한개의 submit버튼으로 같이 보낼 수 있는 건지..

ajax로 하려면 처음부터 다 갈아엎어야 해서 계속 찾아봤는데 대부분 게시판에서 검색어 입력하는 페이징 처리만 있고 나처럼 여러 타입의 값을 넘기는 건 볼 수가 없었다... 😭

​

수업시간에도 제목, 내용, 작성자 세 개의 카테고리와 검색어 하나로 페이징 처리하는 것만 배워서

혼자 할 수 있긴 할까 싶었는데 하면 할수록 오기가 생겨서 강사님한테 하나도 안물어보고 혼자 해버림..

​

처음에는 이 방식 말고도 쉽고 편하게 하는 방법이 있겠지 싶어서 더 찾아보기도 했는데,

아무리 생각하고 찾아봐도 없는 것 같아 결국 하나하나 쿼리스트링으로 넘겨주는 방식을 선택했다.

​

 <script>
   $(function(){    
    	 $(".find-paging").click(function(){
    		let area =  $(".find-area").val();
    		let dateIn = $(".find-in-date").val();
    		let dateOut = $(".find-out-date").val();
    		let guest =  $(".find-guest").val();
    		let name =  $("#find-name").val();
    		let typeObj = $("#search-type-val").val();
    		let faciObj=  $("#find-faci-val").val();
    		let floorObj =  $("#find-floor-val").val();
    		
            location.href='/search/find?page='+ $(this).text()+'&area='+area+'&type='+typeObj+'&daterange='+dateIn
            		+'+~+'+dateOut+'&quantity='+guest+'&name='+name+'&facility='+faciObj+'&floor='+floorObj; 
        });
    });
    </script>

$(this).text()는 클릭 이벤트가 발생한 페이지 번호 텍스트 가져오기

​

dateIn이랑 Out 사이에 '+~+' 이건 datePicker에서 form으로 controller 넘어갈 때 같이 포함돼서 넘어가서 substring 처리했기 때문에 그냥 똑같이 써서 넘겨줬다.

​

체크박스는 파라미터가 배열로 넘어가서 쿼리스트링에 어떻게 써야 하는지를 가장 많이 고민했다.

근데 의외로 자동으로 콤마로 구분되면서 type=캠핑,글램핑,카라반 형식으로 넘어가고 있었다..!

<li th:each="p : ${ #numbers.sequence(pi.startPage, pi.endPage)}">
        <div class="current_page" th:if="${ p == pi.page }">
               <a href="#" th:text="${p}"></a>
        </div>
        <div th:if="${ p != pi.page }">
               <a class="find-paging" style="cursor:pointer" th:text="${p}"></a>
       </div>
</li>

이전, 첫, 다음, 마지막 페이지까지도 동일한 방식으로 링크 주면 될 것 같다.

다음에는 mybatis 동적쿼리문 이랑 사용해서 어렵게 어렵게 구현한 거 올려야지..!