twbspagination 예제 및 옵션 - 삽질중인 개발자

twbs paigination 옵션 및 사용법 정리

 

twbspagination 플러그인은 간단한 옵션 설정을 통해 페이지네이션을 해주는 플러그인이다. 

이 twbs를 사용하는 이유는 다른 페이지네이션 플러그인에 비하여 사용법이 간단하고 깔끔하다.

twbs-pagination은 jQuery와 bootstrap에 최적화 되어 있는 플러그인이다.

 

 

twbs-pagination의 깃허브 주소

josecebe/twbs-pagination

 

twbs-pagination 데모 사이트 주소

jQuery Pagination plugin

 

 

적용 방법

1. 필요한 css 및 js 파일 추가

깃허브에서 파일을 다운 받은 후 아래처럼 태그 삽입. jQuery는 필수이며 bootstrap css는 따로 css가 있으면 필요없음.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/js/twbs-pagination/jquery.twbsPagination.js"></script>

 

2. html 삽입

HTML 

<div id="pagination-div" ></div>

 

 

자주 쓰는 옵션 정리

$('#pagination-div').twbsPagination({
		    totalPages: 35,	// 총 페이지 번호 수
		    visiblePages: 7,	// 하단에서 한번에 보여지는 페이지 번호 수
		    startPage : 1, // 시작시 표시되는 현재 페이지
		    initiateStartPageClick: false,	// 플러그인이 시작시 페이지 버튼 클릭 여부 (default : true)
		    first : "첫 페이지",	// 페이지네이션 버튼중 처음으로 돌아가는 버튼에 쓰여 있는 텍스트
		    prev : "이전 페이지",	// 이전 페이지 버튼에 쓰여있는 텍스트
		    next : "다음 페이지",	// 다음 페이지 버튼에 쓰여있는 텍스트
		    last : "마지막 페이지",	// 페이지네이션 버튼중 마지막으로 가는 버튼에 쓰여있는 텍스트
		    nextClass : "page-item next",	// 이전 페이지 CSS class
		    prevClass : "page-item prev",	// 다음 페이지 CSS class
		    lastClass : "page-item last",	// 마지막 페이지 CSS calss
		    firstClass : "page-item first",	// 첫 페이지 CSS class
		    pageClass : "page-item",	// 페이지 버튼의 CSS class
		    activeClass : "active",	// 클릭된 페이지 버튼의 CSS class
		    disabledClass : "disabled",	// 클릭 안된 페이지 버튼의 CSS class
		    anchorClass : "page-link",	//버튼 안의 앵커에 대한 CSS class
		    
		    onPageClick: function (event, page) {
		    	//클릭 이벤트
				console.log("클릭");
		    }
		});

 

위의 옵션중 iniinitiateStartPageClick 은 처음 twbs 플러그인이 실행될 때 시작 페이지를 오토로 클릭할지에 대한 옵션 설정이다.

예를 들면 시작시 true를 설정하고 페이지를 띄우면 아무행동을 안해도 콘솔에 1회 "클릭" 이라는 텍스트가 찍힌다.

따라서 상황에 따라 false와 true에 대한 설정을 해야한다.

 

페이지 네이션 버튼 활성화 / 비활성화

// 페이지 버튼 클릭 가능
$("#pagination-div").twbsPagination('enable');

// 페이지 버튼 클릭 불가능
$("#pagination-div").twbsPagination('disable');

 

사용할 만한 함수

// 전체 페이지 개수
$("#pagination-div").twbsPagination("getTotalPages");

// 현재 선택된 페이지 번호
$("#pagination-div").twbsPagination("getCurrentPage");


// 페이지 네이션 총 페이지 숫자 변경
// 이 함수가 호출 되면 변경되고 난 후 선택될 페이지 번호에 대한 클릭이벤트가 발생이 되는 점에 유의
$("#pagination-div").twbsPagination("changeTotalPages", 총 페이지, 변경되고 난 후 선택될 페이지 번호);

 

 

 

---

twbspagination ajax 활용법 및 총 페이지 수 변경법

 

[jQuery][bootstrap][pagination] twbspagination ajax & totalPages 변경 방법- 개발자 삽질 일기

 

 

오라클 페이징 쿼리 정리

오라클 페이징 쿼리, 오라클 paging - 개발자 삽질 일기