[JavaScript] AJAX를 이용하는 Page Navigation 제작

AJAX를 이용해 데이터를 이용한 게시글 형태의 노출시 페이지 네비게이션을 필요로 하여 제작하게 되었다.

샘플 데이터 REQRES( https://reqres.in/ ) 사이트에서 제공되는 LIST<RESOURCE>를 이용하였다.

Reqres - A hosted REST-API ready to respond to your AJAX requests

Native JavaScript If you've already got your own application entities, ie. "products", you can send them in the endpoint URL, like so: var xhr = new XMLHttpRequest(); xhr.open("GET", "https://reqres.in/api/products/3", true); xhr.onload = function(){ conso

reqres.in

# 소스코드

<!DOCTYPE html>
<html lang="ko">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
    <title>:: 페이지 네비게이션 Bar 구현 ::</title>
    <style type="text/css">
        table { width:700px; }
        table, th, td { border:1px solid #000000;border-collapse:collapse;padding:5px; }
        th:first-child, td:first-child { width:20%; }
        th:last-child, th:last-child { width:80%; }
        tfoot > tr > td { text-align:center; }
        div#pagingBar > a { text-decoration:none;color:inherit;margin-left:5px;margin-right:5px; }
        div#pagingBar > a:hover { text-decoration:underline;color:#0000FF; }
        div#pagingBar > a:active { text-decoration:underline;color:#0000FF; }
    </style>
</head>
<body>
    <table id="reqresList">
        <thead>
            <tr>
                <th>사진</th>
                <th>회원정보</th>
            </tr>
        </thead>
        <tbody></tbody>
        <tfoot>
            <tr>
                <td colspan="2">
                    <div id="pagingBar"></div>
                </td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
    
    	// 페이지 로딩 후 바로 첫 페이지 데이터 호출
        changePagingNavigation( 1 );
    });

    function changePagingNavigation(pageNum) {

        // 함수명 저장
        const funName = arguments.callee.name;

        // AJAX 요청을 보냅니다.
        jQuery.ajax({
              url : "https://reqres.in/api/users?page=" + pageNum
            , method : "GET"
            , dataType : "json"
            , contentType : "application/json;charset=utf-8"
            , success : function(response) {

                // 페이징 네비게이션 바 생성
                document.querySelector("#pagingBar").innerHTML = createPagingNavigation(
                      funName   // 호출함수명
                    , response.total   // 전체_데이터_ROW
                    , response.per_page   // 출력_제한_ROW
                    , pageNum   // 출력_페이지_번호
                );

                let element = "";

                response.data.forEach(function(user) {
                    element += "<tr>";
                    element += "<td><img src='" + user.avatar +"'></td>";
                    element += "<td>";
                    element += "<p><strong>번호 : </strong>" + user.id + "</p>";
                    element += "<p><strong>이름 : </strong>" + user.first_name + " " + user.last_name + "</p>";
                    element += "<p><strong>이메일 : </strong>" + user.email + "</p>";
                    element += "</td>";
                    element += "</tr>";
                });

                document.querySelector("#reqresList > tbody").innerHTML = element;
            }
            , error : function(xhr, status, error) {
                console.error("오류 : ", error);
            }
        });
    }

    /**
     * @param pagingFun 호출함수명
     * @param totalRow 전체_데이터_ROW
     * @param limitRow 출력_제한_ROW
     * @param pageNum 출력_페이지_번호
     * @returns {string}
     */
    function createPagingNavigation(pagingFun, totalRow, limitRow, pageNum) {

        let pagingBar = "";
        let prevPage = 0;
        let lastPage = 0;
        let totalPage = parseInt( ( totalRow - 1 ) / limitRow );
        let nowPage = 0;

        if(pageNum == 0) {
            nowPage = 0;
        } else {
            nowPage = pageNum;
        }

        let startRec = ( nowPage ) * limitRow;
        let endRec = 0;

        if( ( startRec + limitRow ) > totalRow ) {
            endRec = totalRow;
        } else {
            endRec = startRec + limitRow;
        }

        prevPage = parseInt( ( nowPage - 1 ) / 5 ) * 5;

        if( ( prevPage + 4 ) > totalPage ) {
            lastPage = totalPage;
        } else {
            lastPage = prevPage + 4;
        }

        // 시작 페이지 이동
        pagingBar += "<a href='javascript:;' onClick='" + pagingFun + "(1);'>&lt;&lt;</a>";

        // 이전 단락 이동
        if( prevPage == 0 ) {
            pagingBar += "<a href='javascript:;'>&lt;</a>";
        } else {
            pagingBar += "<a href='javascript:;' onClick='" + pagingFun + "(" + prevPage + ");'>&lt;</a>";
        }

        for(let num = prevPage; num <= lastPage; num++ ) {

            let thisPage = num + 1;
            if( thisPage == nowPage ) {
                pagingBar += "<a href='javascript:;'>" + thisPage + "</a>";
            } else {
                pagingBar += "<a href='javascript:;' onClick='" + pagingFun + "(" + thisPage + ");'>" + thisPage + "</a>";
            }
        }

        // 다음 단락 이동
        if( lastPage != totalPage ) {
            let nextPage = prevPage + 6;
            pagingBar += "<a href='javascript:;' onClick='" + pagingFun + "(" + nextPage + ");'>&gt;</a>";
        } else {
            pagingBar += "<a href='javascript:;'>&gt;</a>";
        }

        // 맨 끝 페이지 이동
        pagingBar += "<a href='javascript:;' onClick='" + pagingFun + "(" + ( totalPage + 1 ) + ");'>&gt;&gt;</a>";

        return pagingBar;
    }
</script>

# 출력결과

:: 페이지 네비게이션 Bar 구현 ::

■ AJAX를 이용하는 Page Navigation Bar 제작

사 진	회 원 정 보

'JavaScript' 카테고리의 다른 글

[JavaScript] 이미지 파일 업로드 및 썸네일 생성 (0)	2024.01.18
[JavaScript] 다중 파일 업로드시 진행률(ProgressBar) 표시 (0)	2024.01.18
[JavaScript] 체크박스를 이용한 백분율 선택 (0)	2023.05.24
[JavaScript] 입력한 텍스트의 Byte 체크 (0)	2023.02.14
[JavaScript] 입력한 텍스트의 문자길이 체크 (0)	2023.02.14

# 소스코드

# 출력결과

■ AJAX를 이용하는 Page Navigation Bar 제작

'JavaScript' 카테고리의 다른 글

티스토리툴바