[개인 의뢰] form을 이용하여 페이지 이동

 

아보카도 에디션(그누보드5 기반)에서 페이징 작업에 대한 의뢰가 들어왔다. 정확히 말하면 특정 디자인에 따라서 페이징을 해달라는 것.
일반적인 페이징 디자인은 다음과 같다.
 

일반적으로 1~10까지의 숫자로 이루어진 페이지다.

 
받은 디자인은 다음과 같다.
 

 
보다시피 깔끔하고 예쁘지만 특정 페이지로 가기가 어렵다는 단점이 있다. 특히 이런 구조는 페이지가 많아질 수록 곤란하다. 검색 기능을 사용해도 괜찮겠지만, 검색 기능을 사용하여도 페이지가 많으면 곤란할 것이다. 그래서 다음을 페이징 생성 함수에 추가했다.

'.$search_page.'

$search_page .= '<form name="getpage" method="get"><input type="hidden" name="bo_table" value="'.$bo_table.'"><input type="text" name="page" value="'.$cur_page.'" size="5" alt="이동 페이지 입력 후 엔터" title="이동 페이지 입력 후 엔터"><input type="submit" id="hiddenPaging" style="display:none;"></form>';
$str .= '<div class="pg_num"><a class="pg_current" onclick="$(this).next(\'.pg_search\').slideToggle(); $(this).next(\'.pg_search\').toggleClass(\'show\')" >'.sprintf('%02d',$cur_page).' ― '.sprintf('%02d',$total_page).'</a><div class="pg_search" style="display:none;">'.$search_page.'</div></div>'.PHP_EOL;

 
보다시피 form을 사용했다. 방식은 get이다. 그누보드5에서는 페이지를 get 방식으로 처리하기 때문에 마찬가지로 page를 올리기로 했다. 내용도 확실하다. 게시판의 아이디인 bo_table, 그리고 구분을 위한 page를 form 에 넣는다. 이대로 입력해서 엔터를 치면 바로 페이지에 get값이 들어가 이동이 가능해진다.
 
하지만 문제가 하나 생겼다. 바로 검색창을 포함한 다른 요소와 연동이 안 되는 문제다. 즉, board ID와 페이지만 깔끔하게 뜨고, 다른 쿼리스트링은 뜨지 않는 것. 이대로면 검색을 하는 의미가 없다.

 
원인을 찾아보니 쿼리스트링에 대한 처리가 미비해서 그렇다. GET으로 보낼 경우, 전부 선언하여 다시 보내야 한다. 그렇지 않으면 GET 방식으로는 form에서 명시하지 않은 input의 쿼리스트링 파라미터는 전달되지 않는다.
 
그러하여 다음처럼 내용을 추가했다. 전역 변수 선언을 하여 쿼리스트링을 그대로 값으로 받아 다시 보내는 형태로 수정하였다.

global $sfl, $stx, $log, $sst;
$search_page .= '<form name="getpage" method="get"><input type="hidden" name="bo_table" value="'.$bo_table.'"><input type="hidden" name="sca" value="'.$sca.'"><input type="hidden" name="sfl" value="'.$sfl.'"><input type="hidden" name="stx" value="'.$stx.'"><input type="hidden" name="log" value="'.$log.'"><input type="hidden" name="sop" value="'.$sop.'"><input type="text" name="page" value="'.$cur_page.'" size="5" alt="이동 페이지 입력 후 엔터" title="이동 페이지 입력 후 엔터"><input type="submit" id="hiddenPaging" style="display:none;"></form>';

 
 
이제 되었다.
 
그러나 이 상태면 스마트 기기에서는 사용하기 불편하여 화면 클릭도 구현해달라는 클라이언트로부터의 요청이 들어와 다음 js를 추가했다.(jQuery 라이브러리 사용)
 

$(document).on('click', function(e) {   
	var $target = $('.pg_search.show');
	const page = '<?=$page?>';
	var gopage = $('form[name="getpage"] input[name="page"]').val();
	
	if ($target.length && !$(e.target).closest('.pg_search.show, .pg_current').length ) {
		if(!page || page != gopage) {
			$('#hiddenPaging').click();
		}
	   $target.hide();
	   $target.removeClass('show');
	}
});

 
show 상태인 pg_search를 $target이라는 jquery 변수로 삼아, form 내 page input과 동일하지 않다면 submit 버튼(id가 hiddenPaging인 것)이 눌리는 것으로 처리했다. 화면 어디를 누르되, input을 눌렀을 때 이동하거나 하는 문제를 막기 위해 length 구분을 사용했다.