페이징 정보로 클라이언트 사이드 렌더링을 하도록 도와주는 라이브러리
- 페이징 HTML의 클래스 이름 및 속성을 아래와 같이 설정한다.
<ul id="pagination" class="paging-group">
<li class="page-start"><<</li>
<li class="page-prev"><</li>
<li class="paging-group-item"><span class="page active" page="1">1</span></li>
<li class="page-next">></li>
<li class="page-end">>></li>
</ul>
- 스크립트를 불러온다.
<script
src="https://code.jquery.com/jquery-3.4.0.min.js"
integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
crossorigin="anonymous"></script>
<script src="/path/pagination.js"></script>
- Pagination 객체를 생성한다. new Pagination($rootElement, activeClassName, callbackFunction, pagingObj)
var pagination = new Pagination($("#pagination"), "active", render, {
page: 1,
endPage: "10",
maxPage: "540",
minPage: "1",
perPage: "10",
startPage: "1"
});
- 페이징 설정 방법
페이지에서 값 설정
<ul id="pagination" class="paging-group" data-page=1 data-end-page=10 data-max-page=540 data-min-page=1 data-per-page=10 data-start-page=1 >
<li class="page-start"><<</li>
<li class="page-prev"><</li>
<li class="paging-group-item"><span class="page active" page="1">1</span></li>
<li class="page-next">></li>
<li class="page-end">>></li>
</ul>
<script>
var pagination = new Pagination($("#pagination"), "active", render, {
page: 1,
endPage: "10",
maxPage: "540",
minPage: "1",
perPage: "10",
startPage: "1"
});
</script>
스크립트에서 값 설정
<ul id="pagination" class="paging-group">
<li class="page-start"><<</li>
<li class="page-prev"><</li>
<li class="paging-group-item"><span class="page active" page="1">1</span></li>
<li class="page-next">></li>
<li class="page-end">>></li>
</ul>
<script>
var pagination = new Pagination($("#pagination"), "active", render, {
page: 1,
endPage: "10",
maxPage: "540",
minPage: "1",
perPage: "10",
startPage: "1"
});
</script>
- 페이지 이동 이벤트가 실행된 후, callback 함수가 실행되어 클라이언트 사이드 렌더링을 할 수 있다.
{
page: 1,
endPage: "10",
maxPage: "540",
minPage: "1",
perPage: "10",
startPage: "1"
}
copyright by yeolsa
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent