Webcontent-> jquery -> jquery.twbsPagination.min.js추가
twbs-pagination-master.zip
0.01MB
class
<!--
$('#pagination').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("클릭");
}
});
-->
index
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./jquery/jquery.twbsPagination.min.js"></script>
</head>
<body>
<!-- https://github.com/josecebe/twbs-pagination -->
<br><br>
<div class="container">
<nav aria-label="Page navigation">
<ul class="pagination" id="pagination"></ul>
</nav>
</div>
<script type="text/javascript">
let totalCount = 51; // 글의 총 수
let pageSize = 10; // 페이지 크기 [1]~[10] 또는 [1]~[5]
let nowPage = 1; // 현재 페이지
let _totalPages = totalCount / pageSize;
if(totalCount % pageSize > 0){
_totalPages++;
}
$("#pagination").twbsPagination({
startPage: 1,
totalPages: _totalPages,
visiblePages: 10,
first:'<span aria-hidden="true"><<</span>',
prev:"이전",
next:"다음",
last:'<span aria-hidden="true">>></span>',
onPageClick: function(event,page){
nowPage = page;
alert('nowPage:'+nowPage);
}
});
</script>
</body>
</html>'Spring' 카테고리의 다른 글
| tiles 타일즈로 화면넘기기(예) (0) | 2020.09.09 |
|---|---|
| ajax (0) | 2020.09.09 |
| 페이징/서치/search jsp로 불러오기 (0) | 2020.09.09 |
| 코어, 타일즈 태그 (0) | 2020.09.07 |
| Tiles 타일즈 (0) | 2020.09.07 |
