이 문서는 기존의 jqGrid 테이블 구성 및 페이지네이션 설정을 바탕으로, 사용자 입력에 따라 동적 조건 검색을 수행하는 방법을 설명합니다. 앞선 글에서 정의한 엔티티 클래스와 테이블 구조는 동일하게 활용되며, 주요 변경점은 쿼리 기능 확장입니다.

HTML 구성

검색 버튼을 통해 조건 기반 조회를 실행할 수 있도록 다음과 같이 버튼을 추가합니다.

<button type="button" id="searchBtn">조회</button>

JavaScript 처리 로직

버튼 클릭 시 그리드 파라미터를 업데이트하고 데이터 재로딩을 수행합니다.

$("#searchBtn").on("click", function() {
    $("#list").jqGrid("setGridParam", {
        url: "/api/sensor/query",
        datatype: "json",
        postData: {
            filterName: $("#nameInput").val(),
            filterCode: $("#codeInput").val(),
            filterType: $("#typeSelect").val()
        },
        page: 1
    }).trigger("reloadGrid");
});

• setGridParam(): 그리드의 옵션을 동적으로 수정하며, 반환값은 현재 그리드 인스턴스입니다.
• datatype: 서버로부터 받을 데이터 형식을 지정합니다. 여기서는 JSON을 사용합니다.
• postData: 서버로 전송할 요청 파라미터를 객체 형태로 설정합니다. 각 필드는 폼 입력값과 연결됩니다.
• page: 검색 결과를 처음부터 표시하기 위해 페이지 번호를 1로 초기화합니다.
• trigger("reloadGrid"): 그리드를 다시 로드하여 새로운 조건에 맞는 데이터를 표시합니다.

서버 측 처리 (Java)

클라이언트에서 전달된 조건을 받아 데이터베이스에서 필터링 후 페이지 단위로 반환합니다.

@PostMapping("/query")
@ResponseBody
public void searchSensors(
    Model model,
    @RequestParam(defaultValue = "1") int pageNum,
    @RequestParam(defaultValue = "10") int pageSize,
    @RequestParam(defaultValue = "desc") String sortDir,
    @RequestParam(defaultValue = "id") String sortBy,
    HttpServletRequest request,
    HttpServletResponse response
) throws IOException {

    // 1. 클라이언트에서 전달된 검색 조건 추출
    String keyword = request.getParameter("filterName");
    String codeFilter = request.getParameter("filterCode");
    String typeFilter = request.getParameter("filterType");

    // 2. 정렬 정보 생성
    Sort sort = Sort.by(Direction.fromString(sortDir), sortBy);
    Pageable pageable = PageRequest.of(pageNum - 1, pageSize, sort);

    // 3. 조건에 맞는 센서 목록 조회
    Page<Sensor> result = sensorService.searchByCriteria(keyword, codeFilter, typeFilter, pageable);

    // 4. 응답 출력
    response.setContentType("application/json;charset=UTF-8");
    response.getWriter().write(JSON.toJSONString(result, SerializerFeature.WriteMapNullValue));
}

데이터 조회 로직은 이전 글에서 소개된 방식과 유사하며, 조건에 따라 동적으로 쿼리를 생성하고 페이징된 결과를 반환합니다.

결과적으로 `sensorService.searchByCriteria(...)` 메서드는 조건 매칭 여부를 확인하고, 페이지 기반으로 데이터를 반환합니다.