728x90
<pagination>
1) html <head>에 script 삽입
- 해당 파일에 여러가지 script를 포함하고 있을 경우, 충돌이 나서 오류가 날 수도 있음(해당 코드를 head 제일 아래에 삽입했더니 오류가 사라짐)
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="js/jquery.twbsPagination.js" type="text/javascript"></script>
2) pagination을 삽입하고자 하는 위치에 html 코드 삽입
- id 설정 필요!!
- myPaging class는 style을 주기위해 내가 만든 class(html 코드 내에서 바로 style을 줘도 무방함)
<ul id="pagination" class="pagination-sm myPaging"></ul>
3) js 파일을 생성 후 <body>에 script 삽입
- 여기에서는 js directory 아래 paging.js 라는 파일을 생성함
<script src="js/paging.js"></script>
4) js파일에 해당 코드 삽입
- 원하는 option에 따라 더 다양하게 사용O
- paging(page): 해당 페이지에서 해야하는 것을 함수로 만듦
- 위 html 코드에서 설정한 id와 동일한 id를 사용해야함!! (여기서는 pagination)
const VISIBLE_PAGES = 10; // 한화면에 보이는 최대 page블럭 수
const MAX_ITEM = 10; // 한화면에 보일 아이템 수
const totalCount = 122; // DBMS에서 조회한 실제 공지사항 item 수
const totalPage = Math.ceil(totalCount / MAX_ITEM); //표현될 총 페이지 수
// 해당 페이지에 해당하는 게시물 보여주기
function paging(page) {
startRow = (page - 1) * MAX_ITEM; // 첫 게시물
// 마지막 페이지일 경우 마지막 게시물 번호
if (page !== totalPage) {
endRow = startRow + MAX_ITEM - 1; // 마지막 게시물
} else {
endRow = totalCount - 1; // 마지막 게시물
}
console.log("현재 페이지: " + page);
console.log("시작 아이템: " + startRow);
console.log("마지막 아이템: " + endRow);
//시작아이템~마지막아이템 게시물만 보여주기
}
$("#pagination").twbsPagination({
totalPages: totalPage, // 전체 페이지 수
visiblePages: VISIBLE_PAGES, // 한 화면에 보이는 최대 페이지 블럭 수
first: "<<", // 페이지네이션 버튼중 처음으로 돌아가는 버튼에 쓰여 있는 텍스트
prev: "이전", // 이전 페이지 버튼에 쓰여있는 텍스트
next: "다음", // 다음 페이지 버튼에 쓰여있는 텍스트
last: ">>", // 페이지네이션 버튼중 마지막으로 가는 버튼에 쓰여있는 텍스트
//initiateStartPageClick: false, // 플러그인이 시작시 페이지 버튼 클릭 여부 (default : true)
// 페이지 클릭 이벤트
onPageClick: function (event, page) {
$("#page-content").text("Page " + page);
paging(page);
},
});
<classList로 class 추가/삭제하기>
- .classList.add("클래스명"): 해당 html 요소에 클래스 추가하기
- .classList.remove("클래스명"): 해당 html 요소에 클래스 삭제하기
1) html 요소 가져오기
- html 요소를 성공적으로 가져왔을 때만 추가/삭제 가능하게 하도록 항상 검사하는 것이 좋음!
2) 클래스명(string)으로 html 요소의 class 추가/삭제하기
- 클래스명은 오타로 인한 오류를 줄이기 위해 const 선언하는 것이 좋음!
const name = document.QuerySelector(".div");
const HIDDEN = "hidden"; //클래스명
// 항상 검사하는 것이 좋음
if (name) {
name.classList.add(HIDDEN); // 클래스명 추가
name.classList.remove(HIDDEN); //클래스명 삭제
}728x90
'주간 학습 > 주간 학습' 카테고리의 다른 글
| 4주차_210720 (0) | 2021.07.22 |
|---|---|
| html 유용한 단축키 (0) | 2021.07.16 |
| 3주차_210715 (0) | 2021.07.16 |
| 3주차_210714 (0) | 2021.07.14 |
| 3주차_210712) GET&POST, 로그인 구현 방법(쿠키, 세션, JWT) (0) | 2021.07.12 |
