[jQuery] 제이쿼리 페이지 네비게이션 플러그인(plugin) - PageNavigator (페이지 번호)

jQuery 페이지 네비게이션 플러그인이 있어 소개합니다.

jQuery 플러그인 정말 찾아보면 없는 게 없네요.

정말 코딩하기 좋은 세상입니다^^

> 프로젝트 사이트 : https://github.com/syakuis/jquery-pagenavigator

> 데모 : http://syakuis.github.io/demo/jquery-pagenavigator/demo.html

> 다운로드 : https://github.com/syakuis/jquery-pagenavigator/releases

  // 기본 스타일
  jQuery('#document_navi').jaPageNavigator({
      page_row : "10" // 보여질 게시물 목록 수
    , page_link : "10" // 보여질 페이지 링크 수
    , total_count : "500" // 게시물 총 수
  });

  // NHN Nuli 스타일
  jQuery('#document_navi2').jaPageNavigator({
      page_row : "10" // 보여질 게시물 목록 수
    , page_link : "10" // 보여질 페이지 링크 수
    , total_count : "500" // 게시물 총 수
    , tag : '#document_navi2' // 특정 영역으로 이동 (책갈피)
  });

  // Bootstrap 스타일
  jQuery('#document_navi3').jaPageNavigator({
      page_row : "10" // 보여질 게시물 목록 수
    , page_link : "10" // 보여질 페이지 링크 수
    , total_count : "500" // 게시물 총 수
  });

사용할 옵션은 다음과 같습니다.

* 필수옵션 : page_row, page_link, total_count

    group : $('#page_group') // 페이지태그 영역
    , start : '.start' // 처음페이지 태그
    , startx : '.startx' // 처음페이지 없을경우 숨김 태그
    , prev : '.prev' // 이전페이지 태그
    , prevx : '.prevx' // 이전페이지 없을경우 숨김 태그
    , pageaction : '.pageaction' // 페이지 번호 노출 영역
    , now : '.now' // 현재페이지번호 태그
    , num : '.num' // 페이지번호 태그
    , div : '.div' // 페이지번호 분리 태그
    , next : '.next' // 다음페이지 태그
    , nextx : '.nextx' // 다음페이지 없을경우 숨김 태그
    , end : '.end' // 마지막페이지 태그
    , endx : '.endx' // 마지막페이지 없을경우 숨김 태그
    , prevpage : '.prevpage' // 이전 1 페이지 태그
    , prevpagex : '.prevpagex' // 이전 1 페이지 없을경우 숨김 태그
    , nextpage : '.nextpage' // 다음 1 페이지 태그
    , nextpagex : '.nextpagex' // 다음 1 페이지 없을경우 숨김 태그
    , url : null // 기본적인 파라메터
    , page : null // 현재페이지번호
    , total_count : '0' // 총 레코드수
    , page_link : 10 // 페이지링크번호 노출 수
    , page_row : 10 // 레코드 노출 수
    , name : 'page' // 페이지 파라메터 명
    , autosort : false // 페이지번호 자동정렬 (선택된 번호가 중간에 위치) (버그있음)
    , tag : null // 인위적으로 노출할 위치

* 기본 사용 예제

jQuery('#document_navi').jaPageNavigator({
      page_row : "10" // 보여질 게시물 목록 수
    , page_link : "10" // 보여질 페이지 링크 수
    , total_count : "500" // 게시물 총 수
  });

<div id="document_navi">
  <a class="start" href="#">&nbsp;처음</a>
  <a class="prev" href="#">&nbsp;이전&nbsp;({page_link})</a>
  <a class="prevpage" href="#">이전&nbsp;</a>

  <!-- 페이지 번호 링크가 노출되는 영역 -->
  <span class="pageaction"></span>
  <!-- 페이지 번호 링크 태그 -->
  <a class="num" href="">{page}</a>
  <!-- 현재 페이지 번호 태그 -->
  <strong class="now">{page}</strong>
  <!-- 페이지 링크 구분 태그 -->
  <span class="div">&nbsp;</span>

  <a class="nextpage" href="#">다음&nbsp;</a>
  <a class="next" href="#">다음&nbsp;({page_link})&nbsp;</a>
  <a class="end" href="#">끝&nbsp;</a>
</div>

* NHN Nuli 디자인을 사용한 예제

<div class="paginate_complex" id="document_navi2">
  <a class="direction sprev start" href="#"><span></span><span></span>&nbsp;처음</a>
  <a class="direction sprev startx">&nbsp;처음</a><!-- 링크가 없을 때 표시할 태그 -->

  <a class="direction sprev prev" href="#"><span></span>&nbsp;이전&nbsp;({page_link})</a>
  <a class="direction sprev prevx">&nbsp;이전</a><!-- 링크가 없을 때 표시할 태그 -->

  <a class="direction sprev prevpage" href="#"><span></span>이전&nbsp;(-1)</a>
  <a class="direction sprev prevpagex">이전&nbsp;(-1)</a><!-- 링크가 없을 때 표시할 태그 -->

  <span class="pageaction"></span>
  <a class="num" href="">{page}</a>
  <strong class="now">{page}</strong>
  <span class="div">&nbsp;</span>

  <a class="direction snext nextpage" href="#">다음&nbsp;(+1)<span></span></a>
  <a class="direction snext nextpagex">다음&nbsp;(+1)</a><!-- 링크가 없을 때 표시할 태그 -->

  <a class="direction snext next" href="#">다음&nbsp;({page_link})&nbsp;<span></span></a>
  <a class="direction snext nextx">다음&nbsp;</a><!-- 링크가 없을 때 표시할 태그 -->

  <a class="direction snext end" href="#">끝&nbsp;<span></span><span></span></a>
  <a class="direction snext endx">끝&nbsp;</a><!-- 링크가 없을 때 표시할 태그 -->

</div>

  jQuery('#document_navi2').jaPageNavigator({
      page_row : "10" // 보여질 게시물 목록 수
    , page_link : "10" // 보여질 페이지 링크 수
    , total_count : "500" // 게시물 총 수
    , tag : '#document_navi2' // 특정 영역으로 이동 (책갈피)
  });

혹시 몰라서 소스 올려봅니다.

jquery-pagenavigator.v1.0.1.zip