개발/Node.js

nodejs를 이용한 페이징 처리 (버튼 누를시 게시글 갱신) Step1

개발자 솜 2021. 11. 16. 12:12

처음 페이징을 접했을 때 꽤나 애먹었던 적이 있고 아직도 모호한 점이 있어서 페이징 공부와 정리를 하고자 단계별로 페이징처리를 하는 방법을 포스팅 한다.

 

Step 1에서는 페이지 버튼을 눌렀을 때, 게시물 번호가 그에 맞춰 바뀌는 것을 만들어 볼것이다. 

예를들어, 1 버튼을 눌렀을 때 1~10까지의 게시물이, 2 버튼을 눌렀을 때 11~20까지의 게시물을 보여줘야 한다.

한 페이지당 게시물은 10개로 잡았다.

요번 Step에서는 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>
    <div class="container">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">idx</th>
          </tr>
          <% for(let i=paging.startPage; i<=paging.endPage; i++){ %>
            <tr>
              <td><%= i %> </td>
            </tr>
          <% } %>
        </tbody>
      </table>
      
      <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
          <li class="page-item"><a class="page-link" href="/?page=1">1</a></li>
          <li class="page-item"><a class="page-link" href="/?page=2">2</a></li>
          <li class="page-item"><a class="page-link" href="/?page=3">3</a></li>
          <li class="page-item"><a class="page-link" href="/?page=4">4</a></li>
          <li class="page-item"><a class="page-link" href="/?page=5">5</a></li>
        </ul>
      </nav>
    </div>
  </body>
</html>

간단한 구현을 위해 bootstrap을 이용하였다. 7,8째줄의 cdn을 삽입해야 css가 입혀진다.

 

routes/index.js

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

/* GET home page. */
router.get('/', async function(req, res, next) {
  
  let pagePerSize = 10 // 한 페이지에 보여질 게시물 수
  let currentPage = req.query.page; // 현재 보여지는 페이지
  let startPage = ((currentPage-1) * pagePerSize) + 1  // 시작 게시글 번호
  let endPage = (startPage + pagePerSize) - 1; // 끝 게시글 번호

  let paging = { // ejs로 전송하기위해 객체화
    'startPage' : startPage,
    'endPage' : endPage
  }

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

module.exports = router;

 

먼저 ejs를 보자.

<li class="page-item"><a class="page-link" href="/?page=2">2</a></li>를 클릭할 때 page=2이라는 파라미터를 가지고 controller로 넘어간다.

controller에서 currentPage에는 2가 대입되고 startPage와 endPage가 각각 11, 20으로 계산된다. 

그러고는 paging이라는 객체에 담겨 res.render를 통해 index.ejs로 전달된다.

 

전달된 paging.startPage와 paging.endPage만큼 반복문을 실행하여 i를 <td>안에 삽입하였다.

 

결과화면

 

1 클릭시

 

2 클릭시

 

3 클릭시

 

 

소스코드 : https://github.com/datoybi/blog-posting/tree/main/paging-step1