[Bootstrap] 페이징(Paging)와 페이저(pager)

Open source/Bootstrap  2020. 2. 26. 09:00

안녕하세요. 명월입니다.


이 글은 Bootstrap에서 페이징(Paging)와 페이저(pager)에 대한 글입니다.


페이징이란 웹 페이지에서 게시물을 리스트별로 나타냈을 때, 한 페이지에 너무 많은 리스트 아이템을 보이면 웹 페이지의 사이즈도 커지고 가독성도 떨어집니다.

그래서 적당한 개수로 나누어 페이지를 만들고, 아래에 페이지 숫자와 화살표를 설정하여 이동을 가능하게 하는 컨트롤을 페이징이라고 합니다.


페이징이라는 것은 html의 기본 컨트롤로는 제공하지 않습니다. 다만 Bootstrap에서는 많이 사용하는 컨트롤이기 때문에 ul태그와 li태그로 페이징을 구성할 수 있습니다.

링크 - https://getbootstrap.com/docs/3.4/components/#pagination

<!DOCTYPE html>
<html>
<head>
  <title>title</title>
  <!-- Bootstrap cdn 설정 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- 페이징을 지정할 태그에 class에 pagination을 넣으면 자동으로 페이징이 된다.-->
  <!-- 페이징의 크기를 제어할 수 있는데 pagination-lg를 추가하면 페이징 크기가 커지고, pagination-sm를 넣으면 작아진다. -->
  <!-- 큰 페이징 class="pagination pagination-lg", 보통 페이징 class="pagination", 작은 페이징  class="pagination pagination-sm" -->
  <ul class="pagination">
    <!-- li태그의 클래스에 disabled를 넣으면 마우스를 위에 올렸을 때 클릭 금지 마크가 나오고 클릭도 되지 않는다.-->
    <!-- disabled의 의미는 앞의 페이지가 존재하지 않다는 뜻이다. -->
    <li class="disabled">
      <a href="#">
        <span>«</span>
      </a>
    </li>
    <!-- li태그의 클래스에 active를 넣으면 색이 반전되고 클릭도 되지 않는다. -->
    <!-- active의 의미는 현재 페이지의 의미이다. -->
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#">
        <span>»</span>
      </a>
    </li>
  </ul>
</body>	
</html>

위처럼 페이징을 작성하는 것은 제 블로그의 리스트를 보시더라도 확인할 수 있습니다.

링크 - 명월일지

위처럼 말입니다. 저의 경우는 이전 페이지가 존재하지 않으면 disabled가 아닌 그냥 "display:none;" 처리를 했네요. 그건 사용자의 사양에 맞게 알아서 커스텀하면 좋을 것 같습니다.


위처럼 페이징을 하는 경우도 있지만 앞으로 가기 혹은 뒤로 가기만 설정하는 경우가 있습니다.

간단하게 위의 페이징에서 숫자만 빠진 것입니다. 그걸 우리는 pager(페이저)라고 합니다.

링크 - https://getbootstrap.com/docs/3.4/components/#pagination-pager

<!DOCTYPE html>
<html>
<head>
  <title>title</title>
  <!-- Bootstrap cdn 설정 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- 페이저를 사용할 태그에는 class에 pager를 추가하면 된다. -->
  <ul class="pager">
    <!-- 2개 이상의 아이템을 넣는다해도 문제는 없습니다만, 그럼 paging 클래스와 차이가 없어진다.-->
    <!-- previous의 클래스 경우는 좌로 밀착, next는 우로 밀착이다. previous와 next를 생략하면 가운데 정렬이다.    -->
    <li class="previous"><a href="#">← Previous</a></li>
    <!-- li태그의 클래스에 disabled를 넣으면 마우스를 위에 올렸을 때 클릭 금지 마크가 나오고 클릭도 되지 않는다.-->
    <!-- disabled의 의미는 앞의 페이지가 존재하지 않다는 뜻이다. -->
    <li class="next disabled"><a href="#">Next →</a></li>
  </ul>
</body>	
</html>

여기까지 Bootstrap에서 페이징(Paging)와 페이저(pager)에 대한 글이었습니다.


궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.

저작자표시

'Open source > Bootstrap' 카테고리의 다른 글

[Bootstrap] 팝오버(popover)  (0) 2020.03.02
[Bootstrap] 툴팁(tooltip)  (0) 2020.02.29
[Bootstrap] 탭 (Tab)  (0) 2020.02.28
[Bootstrap] Panel과 Thumbnails, Card  (0) 2020.02.27
[Bootstrap] 드롭 다운(Dropdown)  (0) 2020.02.24
[Bootstrap] Collapse(메뉴 접기, 펴기)를 사용하는 방법  (0) 2019.12.01
[Bootstrap] Scrollspy  (0) 2019.09.02
[Bootstrap] 모달 (Modal)  (2) 2019.07.19