본문바로가기

Component

Paging

Basic

Paging 컴포넌트는 페이지 처리 기능을 제공하는 컴포넌트입니다. class="Paging"

1 2 3
<div class="Paging">
	<a class="Link">1</a>
	<a class="Link">2</a>
	<a class="Link">3</a>
</div>

선택 인덱스 설정

1 2 3
<div class="Paging">
	<a class="Link">1</a>
	<a class="Link Selected">2</a>
	<a class="Link">3</a>
</div>

모바일 스타일

1 2 3
<div class="Paging Mobile">
	<a class="Link">1</a>
	<a class="Link Selected">2</a>
	<a class="Link">3</a>
</div>

이전,다음 페이지 지정

<div id="p6" class="Paging" data-totalpage="19">
	<a class="Link Prev">이전</a>
	<a class="Link">1</a>
	<a class="Link ">2</a>
	<a class="Link Selected">3</a>
	<a class="Link Next">다음</a>
</div>

이전 그룹 버튼, 이전 페이지 버튼

1 2 3
<div id="p6" class="Paging" data-totalpage="19">
	<a class="Link Prev-group"><span class="Icon Backward"></span></a>
	<a class="Link Prev"><span class="Icon Chevron-left"></span></a>
	<a class="Link">1</a>
	<a class="Link Selected">2</a>
	<a class="Link">3</a>
	<a class="Link Next"><span class="Icon Chevron-right"></span></a>
	<a class="Link Next-group"><span class="Icon Forward"></span></a>
</div>

첫 페이지 버튼, 마지막 페이지 버튼

1 2 3
<div id="p6" class="Paging" data-totalpage="19" data-button-behavior="disable">
	<a class="Link First"><span class="Icon Step-backward"></span></a>
	<a class="Link Prev"><span class="Icon Chevron-left"></span></a>
	<a class="Link">1</a>
	<a class="Link Selected">2</a>
	<a class="Link">3</a>
	<a class="Link Next"><span class="Icon Chevron-right"></span></a>
	<a class="Link Last"><span class="Icon Step-forward"></span></a>
</div>

Attributes

data-maxpage

  • Type: {number}
    • 한 화면에 보여질 페이지 갯수를 설정합니다.

data-totalpage

  • Type: {number}
    • 전체 페이지 갯수를 설정합니다.
Options

$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.

totalpage

maxpage

Functions

.getOptions()

Paging에 설정된 옵션값을 모두 가져올 수 있습니다.

  • Return {object}
    • object
      • Paging에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.
//Paging에 설정된 모든옵션값을 가져옵니다.
$('#Paging').getOptions();

.getSelectedPage()

선택된 페이지를 가져옵니다.

  • return
    • page {number} 선택된 페이지를 가져옵니다.

.setMaxPage(number)

화면에 보여지는 페이지 수를 동적으로 설정합니다.

  • parameter
    • number {number} Required
      • 설정하고자하는 화면 페이지 수

.setOptions(options)

Paging에 동적으로 옵션을 설정합니다.

  • Parameters
    • options {object}
      • Paging에 설정된 옵션을 key-value로 가지는 오브젝트를 입력합니다.
$('#Paging').setOptions({
	totalpage: 3,
	maxpage: 4
});

.setSelectedPage(number)

페이지를 동적으로 선택합니다.

  • parameter
    • number {number} Required
      • 선택하고자 하는 페이지

.setTotalPage(number)

전체 페이지 수를 동적으로 설정합니다.

  • parameter
    • number {number} Required
      • 설정하고자하는 전체 페이지 수