오늘 한 일

과제

1. ajax 받은 결과로 직접 페이징 ui 만들어줌
2. 검색어 입력 후 검색 시 현재 선택된 페이지 번호 유지되는 오류 수정

페이징 동적 생성

인물 정보를 가지고 테이블을 동적으로 생성하는 부분은 구현했는데, 페이징 부분은 전자정부프레임워크에서 제공하는 <ui:pagination>이라는 태그를 이용하고 있어서 어떻게 해야될지 고민이었다. 원래 저 태그에는 paginationInfo라는 속성이 있어 controller에서 받은 paginationInfo 객체를 전달해주면 어디선가 자동으로 변환되어 html에는 onclick function을 가진<a>가 된다. 그런데 javascript에서 html 생성할 때는 그 태그를 그대로 사용할 수 없었다.

<!-- 기존 paging 태그 -->
<div id="paging_wrap">
  <div id="paging" class="paging">
    <ui:pagination paginationInfo = "${paginationInfo}" type="customRenderer" jsFunction="fn_egov_link_page" />
    <form:hidden path="pageIndex" />
  </div>						
</div>

ajax에서 paginationInfo 객체는 받을 수 있기 때문에, paginationInfo 객체의 정보를 이용해 <a>태그를 만들어주는 부분은 직접 구현하기로 했다. 전자정부프레임워크에서는 PaginationInfo라는 클래스를 제공하고 있다. 그걸 열어보면 아래와 같다.

/*
 * Required Fields: 사용자가 입력해야 하는 필드값이다.
 * currentPageNo : 현재 페이지 번호.
 * recordCountPerPage : 한 페이지당 게시되는 게시물 건 수.
 * pageSize : 페이지 리스트에 게시되는 페이지 건수.
 * totalRecordCount : 전체 게시물 건 수.
 *                
 * Not Required Fields : 사용자가 입력한 Required Fields 값을 바탕으로 계산하여 정해지는 값이다.
 * totalPageCount: 페이지 개수.
 * firstPageNoOnPageList : 페이지 리스트의 첫 페이지 번호.
 * lastPageNoOnPageList : 페이지 리스트의 마지막 페이지 번호.
 * firstRecordIndex : 페이징 SQL의 조건절에 사용되는 시작 rownum. 
 * lastRecordIndex : 페이징 SQL의 조건절에 사용되는 마지막 rownum.
 */

이 중 페이징 태그를 만들기 위해서 페이지 리스트의 첫 페이지 번호 firstPageNoOnPageList 와 페이지 리스트의 마지막 페이지 번호 lastPageNoOnPageList를 이용해서 반복문을 만들었다. 안에 들어가는 <a> 태그는 기존 CustomPaginationRenderer에서 사용하던 코드를 가져와서 수정해주었다.

$paging_text ="";
$('#paging_wrap>#paging').empty(); // 페이징 비우기

for (var page = pageInfo.firstPageNoOnPageList; page <= pageInfo.lastPageNoOnPageList; page++) {
   // 현재 페이지 여부에 따라 css 클래스 및 onclick function 다름
  if (page === pageInfo.currentPageNo) {
    $paging_text += "<a href=\"#\" class=\"num_on\">" + page + "</a>&#160;";
  } else {
    $paging_text += "<a href=\"#\" class=\"num\" onclick=\"fn_egov_link_page(" + page + "); return false;\">" + page + "</a>&#160;";
  }
}

검색 시 페이징 오류 수정

이전 검색 결과에서 1이 아닌 다른 페이지 번호를 선택한 상태에서 새로운 키워드로 검색하면 페이징 번호가 선택된 채로 쿼리를 진행하는 오류가 있어 '검색' 버튼 클릭 시, '초기화'버튼 클릭 시 전부 페이지 번호를 1로 초기화해주었다.
그리고 키워드 검색 및 페이징 시 ajax로 데이터 호출하는 부분의 코드가 중복되서 별도 함수로 분리해주었다.

/* 검색 초기화 버튼 */
function fn_egov_reset() {
  document.listForm.reset();
  $("#pageIndex").attr('value', "1");
}

/* 사용자 목록 화면 function */
function fn_egov_selectUserList() {
  $("#pageIndex").attr('value', "1");
  call_ajax();
}

/* pagination 페이지 링크 function */
function fn_egov_link_page(pageNo){
  // 선택한 페이지 번호 저장
  $("#pageIndex").attr('value', pageNo.toString());
  call_ajax();
}

/* ajax로 인물 목록 및 페이징 정보 받기 */
function call_ajax() {
  $.ajax({
    type : 'POST',
    data : $("#listForm").serialize(),
    datatype : 'json',
    url : "<c:url value='/selectUserListAjax.do?'/>",
    success: function(result) {
      updateUserTable(result.paginationInfo,  result.empList);
    },
    error : function(error) {
      console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
    }
  })
}

정보처리기사

애플리케이션 테스트 관리 관련 영상 3개