파일 위치 /js

JavaScript 레벨에서 페이징 구현을 할 수 있도록 하는 유틸 js

해당 js include시점에 다음의 명령어를 통해 KTKPaging 객체가 선언됨

var KTKPaging = new clsPaging();

JavaScript 배열을 객체로 넘겨 호출

기 선언되어 노출된 페이징 갱신 (사용법은 KTKPaging.action과 동일)

javascript선언부 [예제 1] 페이지 link에 href 적용 할 경우.js

<script src="/js/common.js"></script> // KTKPaging.js 호출 전에 common.js가 필수로 호출되어 있어야 함
<script src="/js/KTKPaging.js"></script>
KTKPaging.action({
    id : "paging"
  , totalCount :  setNumber('<?=$totalCnt?>')
  , page :  setNumber('<?=$page?>')
  , allView : true
  , pageGroup : 5
  , rows : 15
  , link : "?page={{page}}" // 페이징에 href 링크 적용 시
});

javascript선언부 [예제 2] 페이지 link에 function 적용 할 경우.js

<script src="/js/common.js"></script> // KTKPaging.js 호출 전에 common.js가 필수로 호출되어 있어야 함
<script src="/js/KTKPaging.js"></script>
KTKPaging.action({
    id : "paging"
  , totalCount :  setNumber('<?=$totalCnt?>')
  , page :  setNumber('<?=$page?>')
  , allView : true
  , pageGroup : 5
  , rows : 15
  , link : function(page) { showList(page); } // 페이징에 onClick 적용
});

본문 페이징 html 구현 부.html

<ul class="pagination active-black" id="paging" style="display: none;">
    <li class="paginate_button previous first_page"><a href="#none" class="first">first</a></li>
    <li class="paginate_button prev_page"><a href="#none" class="prev">prev</a></li>
    <li class="paginate_button active now_index"><a href="#none">{{num}}</a></li>
    <li class="paginate_button normal_index"><a href="#none" page="{{num}}">{{num}}</a></li>
    <li class="paginate_button next_page"><a href="#none" class="next">next</a></li>
    <li class="paginate_button next last_page"><a href="#none" class="last">last</a></li>
</ul>