본문 바로가기
개발/Node.js

nodejs를 이용한 페이징 처리 (페이징 버튼 처리) Step2

개발자 솜 2021. 11. 22. 10:56

Step1 : https://datobi.tistory.com/28?category=948178

 

Step2에서는 하단부의 버튼 처리를 하였다.

한 페이지에 보여질 버튼은 총 5개로 설정하였고, 게시글은 10개로 설정하였다.

DB 연결 전이라 전체 페이지를 임의로 설정하였다.

 

index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title>index</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h3>
      currentPage : <%= paging.currentPage %><br>
      currentSet : <%= paging.currentSet %><br>
      startPage : <%= paging.startPage %><br>
      endPage : <%= paging.endPage %><br>
      startPost : <%= paging.startPost%><br>
      endPost : <%= paging.endPost%><br>

    </h3>
    <div class="container">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">idx</th>
          </tr>
          <!-- 게시글 번호 (임의로 설정))-->
          <% for(let i=paging.startPost; i<=paging.endPost; i++){
            if(i > paging.totalPageCnt){break;}  %> 
            <tr>
              <td><%= i%> </td>
            </tr>
          <% } %> 
        </tbody>
      </table>
      
      <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
          <!-- 뒤로가기 버튼 (1보다 작으면 무조건 뒤로가기 생성)-->
          <% if(paging.currentSet > 1) {%>
          <li class="page-item">
            <a class="page-link" href="/?page=<%=paging.startPage-1%>" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <% } %>

          <!--숫자 버튼-->
          <% for(let i=paging.startPage; i<=paging.endPage; i++){
            if(i > paging.totalPage){break;}  %> 
            <tr>
              <td>    
                <li class="page-item"><a class="page-link" href='/?page=<%=i%>'><%=i%></a></li>
              </td>
            </tr>
          <% } %> 

          <!--앞으로 버튼 (현재 세트가 토탈보다 작으면 생성)-->
          <% if(paging.currentSet < paging.totalSet) {%>
            <li class="page-item">
              <a class="page-link" href="/?page=<%=paging.endPage+1%>" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          <% } %>

        </ul>
      </nav>
    </div>
  </body>
</html>

 

- 게시글 번호 : 보통 DB에서 해당 데이터만 가져오기 때문에 가져온 데이터 길이만큼 반복문을 돌리면 된다.

그렇기 때문에 DB연결 후 startPost와 endPost는 필요가 없다.

하지만 지금은 게시글이 잘 넘어가는지 보여주기위해 추가하였고 한 페이지에서 보여질 startPost와 endPost를 controller에서 만들어 반복문을 지정하였다.

 

- 숫자 버튼 : 버튼의 1 2 3 4 5 를 설정해주는 부분이다. startPage와 endPage 만큼 반복문을 돌린다.

ex) 표출되는 버튼이 1 2 3 4 5 라면 -> startPage 1 endPage 5

 

- 다음 버튼 :  현재 세트가 전체 세트 보다 작으면 생성하게끔 만들었다. 클릭시 endPage+1을 하여 다음 페이지로 넘어가게끔 하였다.

 

- 이전 버튼 : 현재 버튼 세트가 1보다 작으면 무조건 보이도록 하였다. 또한 클릭시 startPage-1을 해주어 이전 버튼세트의 가장 끝 페이지로 가도록 설정하였다.

 

route/index.js

var express = require('express');
var router = express.Router();
// let db = require('../db/index')

router.get('/', async function(req, res, next) {
  let currentPage = req.query.page; // 현재 보여지는 페이지
  if(!currentPage) currentPage = 1 // page 파라미터 값을 넘겨주지 않을 시, 1페이지로 설정
  let pagePerSize = 10 // 한 페이지에 보여질 게시물 수
  let pageBtnSize = 5 // 보여질 페이지 버튼의 개수 
  let totalPageCnt = 101 // 총 게시물 수 (임의로 설정)
  let totalPage = Math.ceil(totalPageCnt / pagePerSize) // 전체 페이지 수
  let totalSet = Math.ceil(totalPage / pageBtnSize) // 전체 세트 수
  let currentSet = Math.ceil(currentPage / pageBtnSize) // 현재 버튼 세트 번호 
  let startPage = ((currentSet-1) * pageBtnSize) + 1  // 시작 페이지 번호
  let endPage = (startPage + pageBtnSize) - 1 // 끝 페이지 번호

  let startPost = ((currentPage-1) * pagePerSize) + 1 // 시작 게시글 번호
  let endPost = (startPost + pagePerSize) - 1 // 끝 게시글 번호

  let paging = { // ejs로 전송하기위해 객체화
    'startPage' : startPage,
    'endPage' : endPage,
    'currentSet' : currentSet,
    'totalSet' : totalSet,
    'totalPage' : totalPage,
    'currentPage' : currentPage,
    'startPost' : startPost,
    'endPost' : endPost,
    'totalPageCnt': totalPageCnt
  }

  res.render('index', {'paging': paging})
});

module.exports = router;

 

- currentPage : 파라미터로 가져오는 현재 페이지다. 페이지가 없을 시 1로 설정해두어 /로 접근했을 때 첫번째 페이지를 표출하도록 만들었다.
- pagePerSize : 한 페이지당 보여질 게시물 갯수이다. 10개로 지정하였다. (1~10, 11~20, 21~30...)
- pageBtnSize : 하단의 페이지 버튼을 5개로 설정하였다. (1 2 3 4 5 , 6 7 8 9 10, 11 12 13 14 15...)
- totalPageCnt : 총 게시물 갯수. 아직 db 데이터를 가져오지 않아서 임의로 101개를 넣었다.
- totalPage : 전체 페이지의 묶음 수이다. (101/10을 올림하여 11)
- totalSet : 하단 페이지 버튼의 전체 세트 수이다. (3세트)
- currentSet : 현재 몇번째 버튼 세트에 있는지 나타낸다.
- startPage: 버튼을 표출할 첫번째 번호이다. (보여지는 하단 버튼이 1~5라면 1)
- endPage : 버튼을 표출할 마지막 번호이다. (보여지는 하단 버튼이 1~5라면 5)
- startPost : 페이지당 보여줄 게시글의 첫번째 번호다. (DB가 없어 임의로 만듦)
- endPost: 페이지당 보여줄 게시글의 마지막 번호다. (DB가 없어 임의로 만듦)
 
 
해당 값들을 하나씩 콘솔에 찍어가며 왜 이렇게 되는지 알아보며 이해하는게 도움이 될 것이다.
 
 
 
 
 
 

GitHub - datoybi/blog-posting: code examples posted on my blog

code examples posted on my blog. Contribute to datoybi/blog-posting development by creating an account on GitHub.

github.com

 

'개발 > Node.js' 카테고리의 다른 글

[nodejs] Middleware 미들웨어 개념, 종류, 사용법(에플리케이션 레벨 미들웨어, 라우터 레벨 미들웨어) 1  (0) 2022.01.17
nodejs를 이용한 페이징 처리 (DB 연결) Step3  (0) 2021.11.22
nodejs를 이용한 페이징 처리 (버튼 누를시 게시글 갱신) Step1  (0) 2021.11.16
Postgre와 nodejs(Express.js) 연동 - 2 (모듈화 및 데이터 추출)  (0) 2021.11.15
Postgre와 nodejs(Express.js) 연동 - 1 (연결확인 및 .env 설정)  (0) 2021.11.15

'개발/Node.js' Related Articles

티스토리툴바