페이지네비게이션 구현

게시판에 주로 사용되는 페이지네비게이션 표현을 서버에서 처리하는 것이 아닌 자바스크립트 즉, 클라이언트 단에서 처리하는 역활을 말한다. 서버에서 데이터 총 통계치를 getPage 함수의 인자에 넣어 호출하게 된다.
서버에 부하를 줄이기 위한 방법이며, 데이터베이스 또한 무리를 줄여줄 수 있다. 전체 데이터를 SELECT 하는 것이 아닌, COUNT 를 이용하여 전체 수만 가져오면 정해진 데이터 노출 수 만큼만 SELECT하기 때문이다.

연산작업에 필요한 공식

총페이지 = ((총데이터 - 1) / 데이터행수) + 1
시작페이지번호 = ((페이지번호 - 1) / 페이지링크열수) * 페이지링크열수 + 1
네비게이션순서 = (시작페이지번호 / 페이지링크열수) + 1
마지막페이지번호 = 시작페이지번호 + (페이지링크열수 - 1)
데이터인덱스 = (페이지번호 - 1) * 데이터행수

 

Example JAVA

<%
int total_count = 30; // 총데이터
int page = 1; // 페이지번호
int page_row = 10; // 데이터행수
int page_link = 9; // 페이지링크열수

int total_page = ((total_count - 1) / page_row) + 1; // 총페이지
int start_page = ((page - 1) / page_link) * page_link + 1; // 시작페이지번호
int now_page = (this.start_page / page_link) + 1; // 네비게이션순서
int end_page = this.start_page + (page_link - 1); // 마지막페이지번호
int start_idx = (page - 1) * page_row; // 데이터인덱스
%>

데이터 select 하기

php+mysql : select * from test limit 데이터인덱스,데이터행수
jsp+ibatis : sqlMap.queryForList("select-map",null,데이터인덱스,데이터행수)
asp+mssql : select TOP 데이터인덱스,데이터행수 * form test

 

페이지네비게이션 템플릿

디자인 작업이 용이하게 구현하였다. {$page} 는 페이지번호 태그이며, id 요소 명은 그룹명.역활 로 조합한다.
그룹명을 이용하여 여러개의 페이지네비게이션을 구현할 수 있다.

page.div 는 페이지 링크의 구분자 역활을 한다. 아래의 구분자 즉, page.div 는 / 임을 알 수 있다.
1/2/3/

<div>
  <span id="page.start">처음</span>
  <span id="page.prev">이전</span>
  <span id="page.now">{$page}</span>
  <span id="page.div">&nbsp;</span>
  <span id="page.num">[{$page}]</span>
  <span id="page.next">다음</span>
  <span id="page.end">마지막</span>
</div>

위 태그를 필요한 것만 사용하면 되며, 꼭 그룹.역활의 형식은 지켜야 한다.

 

Action 자바스크립트

getPage("그룹명","URL","페이지번호","총페이지","페이지링크열수","시작페이지번호","마지막페이지번호");

URL은 표현된 각 페이지번호에 입혀지는 링크주소입니다.
예) <a href="/test.jsp?aaa=bbb&page=1">[1]</a>

인자는 " 둘러쌓야합니다. 즉 String 으로 전달해야 합니다.

 

Example Source

<div>
  <span id="page.prev">이전</span>
  <span id="page.now">{$page}</span>
  <span id="page.div">&nbsp;</span>
  <span id="page.num">[{$page}]</span>
  <span id="page.next">다음</span>
</div>

<script type="text/javascript">
//<![CDATA[
getPage("page","/list.jsp","1","2","1","1","2");
//]]>
</script>

 

Sample

 

 

written by Seok Kyun. Choi. 최석균.
http://www.cyworld.com/syaku
http://syaku.tistory.com