jQuery Pagination Plugin example
여기에서 소개할 jQuery Pagination Plugin은 Bootstrap과 함께 작동하므로 jQuery라이브러리와 Bootstrap 라이브러리를 동시에 필요로 한다.
Download : http://botmonster.com/jquery-bootpag/#example-full
위의 사이트에 접속하여 페이지 상단 배너에 있는 [Download] 버튼을 누르고 플러그인 소스를 복사하여 로컬 시스템에 저장한다.
저장할 때는 파일명을 'jquery.bootpag.min.js 으로 하고 아래의 코드처럼 <script src="jquery.bootpag.min.js"></script> 을 추가한다
bootpag 플러그인을 이용한 실제 페이징 구현예제는 여기를 클릭하여 참조하세요
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="jquery.bootpag.min.js"></script>
<script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div id="content">Dynamic Content goes here</div>
<div id="page-selection">Pagination goes here</div>
<script>
// init bootpag
$(function(){
$('#page-selection').bootpag({
total: 50, <!-- total pages -->
page: 22, <!-- current page -->
maxVisible: 5, <!-- Links per page -->
leaps: true,
firstLastUse: true,
first: '←',
last: '→',
wrapClass: 'pagination',
activeClass: 'active',
disabledClass: 'disabled',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first'
}).on("page", function(event, num){
$("#content").html("Page " + num); // or some ajax content loading...
});
});
</script>
</body>
</html>bootpag 플러그인을 이용한 실제 페이징 구현예제는 여기를 클릭하여 참조하세요
또 다른 플러그인
Download & Demo : http://www.pontikis.net/labs/bs_pagination/demo/
위의 사이트에 접속하여 데모를 확인하고 구성 파일을 다운로드하여 아래와 같이 코드에 추가한다.
jQuery, Bootstrap 라이브러리는 아래와 같이 CDN을 사용하면 된다
<!DOCTYPE html>
<html>
<head>
<!-- JQUERY -->
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- BOOTSTRAP -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- PAGINATION plugin -->
<link rel="stylesheet" type="text/css" href="jquery.bs_pagination.min.css">
<script type="text/javascript" src="jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="en.min.js"></script>
<script type="text/javascript">
$(function() {
$("#demo_pag1").bs_pagination({
totalPages: 100
});
});
</script>
</head>
<body>
<!-- Just create a div and give it an ID -->
<div id="demo_pag1"></div>
</body>
</html>