HSY_mumu 2021. 7. 16. 15:17
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