Pagination

기본 사용

<div class="gn-pagination">
  <a class="is-disabled" href="#"><i class="fa fa-angle-double-left"></i></a>
  <a href="#"><i class="fa fa-angle-left"></i></a>
  <ul>
    <li><a href="#">1</a></li>
    <li class="is-active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
  </ul>
  <a href="#"><i class="fa fa-angle-right"></i></a>
  <a href="#"><i class="fa fa-angle-double-right"></i></a>
</div>

크기

<div class="gn-pagination is-small">
  <a href="#"><i class="fa fa-angle-double-left"></i></a>
  <a href="#"><i class="fa fa-angle-left"></i></a>
  <ul>
    <li><a href="#">1</a></li>
    <li class="is-active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
  </ul>
  <a href="#"><i class="fa fa-angle-right"></i></a>
  <a href="#"><i class="fa fa-angle-double-right"></i></a>
</div>
<div class="gn-pagination is-normal">
  <a href="#"><i class="fa fa-angle-double-left"></i></a>
  <a href="#"><i class="fa fa-angle-left"></i></a>
  <ul>
    <li><a href="#">1</a></li>
    <li class="is-active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
  </ul>
  <a href="#"><i class="fa fa-angle-right"></i></a>
  <a href="#"><i class="fa fa-angle-double-right"></i></a>
</div>
<div class="gn-pagination is-medium">
  <a href="#"><i class="fa fa-angle-double-left"></i></a>
  <a href="#"><i class="fa fa-angle-left"></i></a>
  <ul>
    <li><a href="#">1</a></li>
    <li class="is-active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
  </ul>
  <a href="#"><i class="fa fa-angle-right"></i></a>
  <a href="#"><i class="fa fa-angle-double-right"></i></a>
</div>

정렬

-center 정렬을 기본으로 사용한다.

<div class="gn-pagination is-center">
  <a href="#"><i class="fa fa-angle-double-left"></i></a>
  <a href="#"><i class="fa fa-angle-left"></i></a>
  <ul>
    <li><a href="#">1</a></li>
    <li class="is-active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
  </ul>
  <a href="#"><i class="fa fa-angle-right"></i></a>
  <a href="#"><i class="fa fa-angle-double-right"></i></a>
</div>
<div class="gn-pagination is-right">
  <a href="#"><i class="fa fa-angle-double-left"></i></a>
  <a href="#"><i class="fa fa-angle-left"></i></a>
  <ul>
    <li><a href="#">1</a></li>
    <li class="is-active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
  </ul>
  <a href="#"><i class="fa fa-angle-right"></i></a>
  <a href="#"><i class="fa fa-angle-double-right"></i></a>
</div>

생성 옵션

<div class="new-pagination"></div>

Gn.create('pagination', {
  target: '.new-pagination',
  total: 12000,
  onChange: p => {
    console.log(p);
  }
});

name		type	default	description
target		string		페이지네이션 생성 타겟
size		string		'small','normal','medium','large'
align		string	'center'	'center','left','right'
rows		number	30	한 페이지에 출력될 데이터 갯수
total		number		전체 데이터 갯수
siblingPages		number	10	페이징 숫자가 표시되는 카운트