과거 내 블로그에 간단한 테스트를 통해 페이징 구현을 설명했었다. 나는 공부했던 내용을 바탕으로 회사 업무에서 페이징을 적용하면 되겠지! 라고 생각하며 큰 걱정이 없었다. 그러나 회사에서는 view에 표출되는 테이블을 jqGrid를 적용하여 표출해주시길 바랬고, 기존 내 로직과는 너무 많은 것이 변했다. 이걸로 한 3일 정도 고생을 했던 거 같은데 이번 글에서는 그 로직이나 과정을 간단히 설명하고자 한다.
기존의 jqGrid는 아래와 같이 ajax로 받은 모든 데이터들을 하나의 배열에 담아 전달해주면 알아서 리스트 표출, 페이징, 정렬 등 다양한 기능을 수행해주었다.
그러나...문제가 하나 생겼다.
위의 사진을 보면 20개씩 표출되는 데이터가 3043 페이지가 나왔다. 즉 60,860 이상의 데이터를 jqGrid에서 한번에 받아버리니 이클립스가 꺼지고 아주 난리도 아니였다!
(추후에 알게 된 사실이지만 이건 jqGrid의 문제가 아니라 java의 메모리가 원인이 되었던 것이고, 이클립스의 console 부분이 문제가 되었다. 해당 내용은 다음에 풀도록 하겠다.)
그래서 jqGrid에 데이터를 한번에 배열에 담지 않으면 페이징을 구현할 수 없다고 좌절하였지만 문득 생각이 들었다.
"jqGrid를 내가 커스텀하면 되는거잖아?!"
아래는 내가 jqGrid와 spring을 활용하여 구현한 기능에 대한 설명이다.
0. 표출 화면
1. View
jsp
jqGrid > paging.js > initPage(function)
jqGrid > paging.js > pagingAgency(function)
2. Controller
3. Impl
4. Model
list쿼리
count쿼리
위의 코드 로직을 설명하면 다음과 같다.
- view에서 ajax를 통해 controller로 request 을 수행한다.
- controller는 view에서 전달해준 데이터 - inputList(검색조건에 필요)와 page(페이징 역활 연산에 필요)를 가지고 model에 값을 전달한다.
(동시에 paging을 조작하기 위한 total 카운트를 받아오고 해당 데이터를 통해 list를 요청)- model에서는 Contoller에서 전달 받은 값을 통해 데이터를 조회하고 다시 반환한다.
- Contller는 model에서 전달 받은 데이터를 다시 view로 반환
- view는 전달 받은 데이터를 가지고 화면에 표출한다.
- 이후 jqGrid를 통해 리스트를 표출하는데 그 내용은 아래와 같다.
6-1. clearGridData를 통해 기존에 뿌려진 데이터들을 정리한다.
6-2. setGridParam을 통해 전달 받은 데이터를 jqGrid에 전달하여 화면을 표출한다.
6-3. jqGrid > paging.js > initPage 함수를 통해 실질적으로 뿌려질 html 태그나 데이터를 조작한다.
6-4. jqGrid > paging.js > pagingAgency함수를 통해 페이징 버튼을 조작한다.
너무 나만 이해할 수 있게 글을 적은 거 같지만...그래도 설명할 수 있는 부분은 최대한 설명했다. 이후 프로젝트에는 다른 방식으로 페이징을 구현해보고 싶은 생각이 있다.
