node.js로 웹서비스 만들기 (12. 부트스트랩 pagination)

table로 데이터를 표시할 때 한 화면에 모든 데이터를 다 보여주는 것은 불가능한 일이므로 20개 또는 30개 단위를 한페이지로 데이터를 보여주는 방식을 페이지네이션이라고 합니다.

이번 글은 부트스트랩에서 지원하는 페이지네이션을 적용해서 node.js에서 페이지 단위로 데이터를 읽어와 프론트로 전달하는 방법에 대해 작성한 글입니다.

 

부트스트랩 페이지네이션 관련 자세한 사항은 아래 링크 참고 부탁 드리겠습니다.

https://getbootstrap.kr/docs/5.0/components/pagination/

 

웹도 처음이고 페이지네이션 사용도 처음이라 최대한 간략하게 개발해보았습니다.

 

프론트에  페이지네이션 추가

퀴즈 목록을 보여주는 quizlist.ejs 파일의 html body 하단에 아래와 같이 페이지네이션 코드를 추가합니다.

페이지는 startPage를 시작으로 10개가 보여지도록 했고 현재 페이지는 Bold로 처리하고 없는 페이지는 회색에 disabled 처리했습니다.

자세한 코드는 아래와 같습니다.

<nav aria-label="Quiz Page navigation">
    <ul class="pagination justify-content-center">
        // 이전 페이지 단위로 이동, 이전 단위로 이동을 위해 startPage에서 -1을 해줌
        <li class="page-item">
            <a class="page-link" href="/quiz/page/<%=(startPage-1) %>" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        // startPage부터 10개 페이지 표시
        <% for(i = startPage; i <= 10; i++) { %>
            <% if(i == currentPage) { %>
                // 현재 페이지는 bold
                <li class="page-item"><a class="page-link" href="/quiz/page/<%=i %>"><b><%=i %></b></a></li>
            <% } else if (i > lastPage ){ %>      
                // 존재하지 않는 페이지는 회색에 disabled 처리
                <li class="page-item disabled"><a class="page-link" href="/quiz/page/<%=i %>"><div style="color:#aaa;"><%=i %></div></a></li>
            <% } else { %>      
                // 존재하는 페이지는 normal 처리
                <li class="page-item"><a class="page-link" href="/quiz/page/<%=i %>"><%=i %></a></li>
            <% } %>                      
        <% } %>
                  
        // 다음 페이지 단위로 이동, 다음 단위로 이동을 위해 startPage에 +10을 해줌.
        <li class="page-item">
            <a class="page-link" href="/quiz/page/<%=(startPage+10) %>" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

 

백엔드에서 페이지 이동 처리

페이지 전환을 담당할 quiz.js 파일에 아래와 같이 코드를 추가합니다.

const LIMIT = 20;

// 페이지 전환
router.get('/page/:reqPage', function(req, res){

    if(!req.session.user){
        res.render('login');
        return;
    }

	// 파라미터에서 프론트에서 보내온 reqPage를 추출
    var params = req.params;
    var reqPage = params.reqPage;
    
    // DB에 요청할 데이터의 startIndex를 계산
    var startIndex = 0
    if (reqPage > 1) {
        startIndex = (reqPage-1) * LIMIT;
    }
    
    // reqPage를 사용해 시작 페이지 재계산
    var startPage = parseInt(reqPage/10);
    if (startPage < 1){
        startPage = 1
    } else if ((reqPage%10) == 0) {
        startPage = reqPage - 9
    } else {
        startPage = (startPage * 10) + 1
    }

	// quiz 테이블에 몇개의 퀴즈 데이터가 있는지 확인
    var countSql = `SELECT COUNT(qid) AS totalCount FROM quiz`;
    conn.query(countSql, function (err, cnt, fields) {
        if(err) console.log('query is not excuted. select fail...\n' + err);
        else{
            // 몇번째 페이지가 마지막 페이지인지 계산
            var lastPage = parseInt(cnt[0].totalCount/LIMIT);
            if ((cnt[0].totalCount%LIMIT) > 0 ){
                lastPage += 1;
            }

        	// startIndex부터 LIMIT(20개)의 데이터를 DB에 query
            var sql = `SELECT qid, type, contents, createdAt, answer, comment FROM quiz ORDER BY qid DESC LIMIT ?, ?`;
            var param = [startIndex, LIMIT];
            conn.query(sql, param, function (err, rows, fields) {
                if(err) console.log('query is not excuted. select fail...\n' + err);
                else {
                	// 결과를 프론트에 전달
                    res.render('quizlist', {startPage: startPage, lastPage: lastPage, currentPage: pageIndex, limit: LIMIT, list: rows});
                }
            });        
        }
    });
});