GRID FEATURE

서버에서 정렬과 검색

서버 조회는 행 범위·정렬·필터를 하나의 조건으로 서버에 전달하는 방식입니다. 단순 목록 조회에는 Infinite 모델과 함께 사용하고 서버 그룹·피벗은 Server-Side 모델을 검토합니다.

동작 원리와 선택 기준

클라이언트가 보내는 필드 이름을 서버의 SQL에 그대로 붙이지 마세요. 앱이 허용한 필드와 연산자로 해석하고 동일한 조건으로 rows와 total을 계산합니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

예제 1. 담당 팀별 정렬 요청

정렬 모델은 field와 direction 배열입니다. 다중 정렬은 배열의 앞 조건이 우선합니다.

javascript
await grid.setSortModel([
  { field: 'team', direction: 'asc' },
  { field: 'quantity', direction: 'desc' }
]);

결과 확인: 원격 모델이 요청한 조건을 서버가 적용해야 모든 페이지의 순서가 일관됩니다. 한 페이지 안에서만 다시 정렬하면 전체 순서는 보장되지 않습니다.

예제 2. 검색과 페이지를 함께 처리

예를 들어 검색어 Platform, startRow 0, endRow 100 요청을 받으면 서버는 검색→정렬→구간 추출 순서로 처리합니다. 검색 후 전체 개수도 따로 계산합니다.

결과 확인: 응답의 total은 필터 전 주문 수가 아니라 검색에 맞는 전체 주문 수입니다. 다음 페이지에서도 같은 조건을 유지합니다.

예제 3. 늦게 도착한 요청 처리

사용자가 A를 검색한 뒤 AB로 바꿨을 때 A 요청이 나중에 끝날 수 있습니다. 앱의 요청 ID·취소 신호로 새 조회가 오래된 응답에 덮이지 않게 합니다.

결과 확인: 마지막 사용자 조건의 결과만 화면에 남아야 합니다. 취소된 요청과 실제 서버 오류를 같은 오류 메시지로 보여 주지 마세요.

조합할 때와 문제를 해결할 때

오프셋 기반 페이지에서 조회 사이 새 주문이 추가되면 중복이나 누락이 생길 수 있습니다. 서버에서 안정적인 보조 정렬 키나 스냅샷 기준을 사용하세요.

응답 행 수가 짧다는 이유만으로 오류라고 판단하지 마세요. 마지막 구간일 수 있으며 전체 개수와 함께 판정합니다.

함께 읽기