게시판 페이지 개수별 검색(selectbox 검색)

페이지에 10개/20개/30개씩 보이도록 설정하는 기능을 간단히 이야기해보겠습니다.

전체 소스를 올리면 너무 양이 많아져서 페이징 기능이 완료되었다는 가정하에 작성하였습니다.

페이징을 완료하였다면 개수별 검색 기능은 jsp에서만 간단히 작성하면 구현할 수 있습니다!

 

---

 

아래는 구현 화면입니다.

 

 

 

 

JSP

Onchange 함수를 통해서 자바스크립트로 보냅니다.

option값은 c:if문을 사용하여 각각의 값일 경우 선택값이 변하지 않도록 sleected값을 설정합니다.

 

 

<div class="form-group">
    <select id="pageUnit" name="pageUnit" onchange="Change(1)">
        <option value="10" <c:if test="${searchVO.pageUnit == 10}">selected="selected"</c:if>>10개씩 보기</option>
        <option value="20" <c:if test="${searchVO.pageUnit == 20}">selected="selected"</c:if>>20개씩 보기</option>
        <option value="30" <c:if test="${searchVO.pageUnit == 30}">selected="selected"</c:if>>30개씩 보기</option>
    </select>
</div>

 

 

Script

 

Idx 값과 select id에 선언한 값을 각각 변수에 담습니다.

그리고 조건으로 만약에 특정 페이지 값을 선택할 경우 location.href를 통해 url 뒤에 변수를 넣어 보낼 수 있도록 합니다.

function Change(idx){
    var pagenum = idx;
    var nowPaging = $("#pageUnit option:selected").val();
    
    if(nowPaging == 10){
        location.href="${path}/onlinecounsel/counselhistory/list.do?pageIndex="+pagenum+"&pageUnit="+nowPaging;    
    }else if(nowPaging == 20){
        location.href="${path}/onlinecounsel/counselhistory/list.do?pageIndex="+pagenum+"&pageUnit="+nowPaging;    
    }else if(nowPaging == 30){
        location.href="${path}/onlinecounsel/counselhistory/list.do?pageIndex="+pagenum+"&pageUnit="+nowPaging;    
    }
}

 

여기서 반드시 주의해야할 것은 

스크립트 문장에서 "&pageUnit=" 대신 다른 별칭을 작성하면 sql에서 못읽어서 반응을 하지 못합니다!

location.href="${path}/onlinecounsel/counselhistory/list.do?pageIndex="+pagenum+"&pageUnit="+nowPaging; 

반드시 조건식과 동일한 이름으로 작성해주세요!