0.2.0
당신이 어떤 프론트엔드 환경을 쓰던 페이징은 한결같이 심플하게.
bower install jquery.paging
또는 ZIP 파일을 다운로드 후 원하는 스크립트 폴더에 풀기.
requirements: jquery >= 1.5.0
//더이상 심플하게 설명이 필요한가?
$('#paging').paging({max:50});
//한번 호출 후, 다음 호출은 속성을 생략해도 설정한 값이 유지되어 일부 속성만으로 호출 가능.
$('#paging').paging({current:2}); //앞서 설정한 50페이지 중 1 페이지에서 2 페이지로 이동 효과.
//컨테이너에 페이징을 없애고자 할 경우 아래처럼 코딩하여 해결 가능.
$('#paging').paging('destroy');
className: (신규) 페이징에 들어갈 컨테이너 요소의 CSS 클래스명. 기본값"jquery-paging".
item: 페이징 요소 태그명, 기본값"a".
itemClass: 페이징 요소 중 페이지 수 CSS 클래스, 기본값"paging-item".
itemCurrent: 현재 페이지를 나타내는 CSS 클래스이며 페이징 요소와 중첩됨, 기본값"selected".
format: 페이지를 나타낼 내용, 기본값"[%d]".
sideClass: 다음 또는 이전 버튼 CSS 클래스, 기본값"paging-side".
next: 다음 버튼 내용. 기본값"[>{5}]"("[>{5}]")
prev: 이전 버튼 내용. 기본값"[{4}<]"("[{4}<]")
first: 첫 페이지 내용. 기본값"[1<<]"
last: 마지막 페이지 내용. 기본값"[>>{6}]"
length: 페이지 표시할 개수. 기본값10.
max: 최대 표현할 페이지 수. 기본값1.
current: 현재 페이지 정의. 기본값1.
href: a 태그일 때 링크 주소를 정의. 기본값"#%d"
event: 기본 이벤트 활성화. 새로고침 없이 동적으로 페이징 초기화됨. ajax에 유용. 기본값true. event=true 일 때 가능한 이벤트 정의..
onclick: 페이징 버튼 클릭 시 호출. false 반환 시 동적으로 페이지가 바뀌지 않음. 동적 페이징을 원하지만 href로 인한 링크 이동을 원하지 않을 경우 이벤트 메서드인event.stopPropagation()호출.
onprev: 이전 버튼 초기화 시 이벤트.this는 이전 버튼 요소를 가리킴.(plain DOM. not jQuery!)
onnext: 다음 버튼 초기화 시 이벤트.this는 다음 버튼 요소를 가리킴.(plain DOM. not jQuery!)
onitem: 각 페이지 버튼 초기화 시 이벤트.this는 각 페이지 버튼 요소를 가리킴.
(for format,next,prev,href,first,last property)
{0}= 클릭 시 페이지
{1}= 페이지 길이
{2}= 처음 페이지
{3}= 마지막 페이지
{4}= 이전 파트의 마지막 페이지
{5}= 다음 파트의 처음 페이지
{6}= 맨 마지막 페이지
- 0.2.1 : 다음 버튼과 마지막 페이지 버튼 표시조건 문제 수정
- 0.2.0 : 불필요한 append 옵션 삭제. 컨테어너 요소 관리가 용이하도록 className 속성 추가. 재호출 시를 위해 페이징이 초기화된 요소에 옵션이 저장됨.
- 0.1.7 : onclick 이벤트 기능 향상.
- 0.1.6 : first 또는 last 내용에 false 설정시 만들지 않도록 기능 추가.
- 0.1.5 : 처음 페이지 및 마지막 페이지 추가. 내용에 치환자 적용 가능. 'append' 옵션 추가 : true 설정 시 기존 내용이 삭제되지 않고 포함됨. {6} 치환자는 마지막 페이지(max 값과 동일) 를 가리킴.
- 0.1.0 : 초기 버전.
MIT