jqGrid 페이징(pager) 안 나옴: reloadGrid 후 리스트는 나오는데 페이지바가 사라질 때

jqGrid를 쓰다 보면 reloadGrid()를 호출했는데 rows(리스트)는 정상인데 하단 페이징(pager/page)이 안 보이는 증상을 종종 만납니다. 특히 같은 화면 영역에 다른 JSP를 ajax로 불러와 덮어그리는 구조에서 자주 발생합니다.

---

문제 상황

• 처음 화면 진입 시에는 jqGrid 페이징이 정상
• 화면 안에서 버튼 클릭 → 다른 JSP를 동일 영역에 렌더링
• 그 JSP에서 다시 jqGrid 호출하면 리스트는 나오는데 pager(페이지바)가 안 생김

---

원인 1순위: pager id 중복 (#pager가 2개 이상)

HTML에서 id는 문서 내에서 유일(unique)해야 합니다. 그런데 기존 JSP와 새 JSP 모두 id="pager"처럼 동일한 id를 쓰면, DOM 안에 #pager가 여러 개 생깁니다. 이 경우 jqGrid는 pager를 첫 번째 요소에 붙여버리거나, 보이지 않는 영역에 렌더링하는 등 동작이 꼬여서 “데이터는 나오는데 페이징이 안 보이는” 상태가 됩니다.

10초 진단: 콘솔에서 중복 여부 확인

document.querySelectorAll("#pager").length

결과가 2 이상이면 중복 id 확정입니다.

---

해결 방법: grid/pager id를 유니크하게 분리

화면(뷰)별로 id를 분리해서 충돌을 없애면 즉시 해결됩니다.

• 기존 화면: grid_main, pager_main
• 새로 로드된 JSP: grid_sub, pager_sub

$("#grid_sub").jqGrid({
  pager: "#pager_sub",
  rowNum: 20,
  viewrecords: true
});

(추천) JSP를 ajax로 끼워 넣는 구조라면 “로드 완료 후 init”

JSP를 load()로 넣는다면 DOM이 붙은 뒤 jqGrid를 초기화해야 pager가 안정적으로 생성됩니다.

$("#content").load("/newView.jsp", function () {
  initGrid(); // 로드 완료 후 jqGrid init
});

추가 체크리스트(재발 방지)

• 같은 id로 그리드를 재생성한다면 생성 전 언로드:

  if ($("#grid")[0] && $("#grid")[0].grid) {
    $("#grid").jqGrid("GridUnload");
  }

• 새 JSP 안에 jQuery/jqGrid 라이브러리를 다시 로드하지 않기(중복 로딩 방지)

---

한 줄 요약

jqGrid 페이징 안 나옴(reloadGrid 후 pager 사라짐) 문제는, 특히 JSP 동적 로딩 구조에서 #pager 중복 id가 원인인 경우가 가장 많습니다. grid/pager id를 유니크하게 분리하면 대부분 즉시 해결됩니다.

---