[Java/Javascript] 페이징 paging 예제

백엔드/프론트엔드 구분해서 개발하는 추세라 리액트나 vue 사용하면 쌩으로 페이징을 개발해서 쓸 것 같진 않은데, 그래도 정리차 올려놓는다. 참고로 pagingUtils쪽 로직은 내가 개발한 부분은 아니고, 먼저 이전 분이 개발해놓으신 거다.

퍼블리싱은 알아서...

 

 

▽ paging.js

 

/**
 * 페이징 처리 JS
 */
 var pagingUtil = {
    pagingView: function (currentPageNo, pageSize, totalCount, targetFunction) {
        var pageNo = parseInt(currentPageNo); // 현재 페이지 번호
        var countPage = 10; // 한 화면에 출력될 페이징 개수.

        var finalPageNo = parseInt(totalCount / pageSize);  //마지막 페이지 번호
        var strPaging = "";
        var targetFunction = (targetFunction == null || targetFunction == "") ? "goPage" : targetFunction;

        if (totalCount % pageSize > 0) {
            finalPageNo++;
        }

        if (finalPageNo < pageNo) {
            pageNo = finalPageNo;
        }

        var startPage = Math.floor(((pageNo - 1) / countPage)) * countPage + 1;
        var endPage = startPage + countPage - 1;

        if (startPage <= 0) {
            startPage = 1;
        }
        if (endPage > finalPageNo) {
            endPage = finalPageNo;
        }

        //strPaging ="<ul class='paginate'>";
        if (pageNo > 1) {
            // strPaging += "<a href=\"javascript:"+targetFunction+"(1);\">처음으로</a>";
            strPaging += "<li class='page-item'><a href=\"javascript:" + targetFunction + "(" + (pageNo - 1) + "); \" class='page-link'><</a></li>";
        }

        for (var iCount = startPage; iCount <= endPage; iCount++) {
            if (iCount == pageNo) {
                strPaging += "<li class='page-item active'><a href='javascript:void(0);' class='page-link'><strong>" + iCount + "</strong></a></li>";
            } else {
                strPaging += "<li class='page-item'><a href=\"javascript:" + targetFunction + "(" + iCount + ");\" class='page-link'>" + iCount + "</a></li>";
            }
        }

        if (pageNo < finalPageNo) {
            strPaging += "<li class='page-item'><a href=\"javascript:" + targetFunction + "(" + (pageNo + 1) + ");\" class='page-link'>></a></li>";
            //strPaging += "<a href=\"javascript:"+targetFunction+"("+finalPageNo+"); \" class='next'>다음페이지</a>";
        }
        //strPaging +="</ul>";

        return strPaging;
    }

    //게시글의 시작 인덱스번호
    , getStartOffset: function (currentPageNo, pageSize) {
        //      return ((currentPageNo -1) * pageSize) + 1;
        return (currentPageNo - 1) * pageSize;
    }

    //게시글의 끝 인덱스번호
    , getEndOffset: function (currentPageNo, pageSize) {
        return currentPageNo * pageSize;
    }

    //마지막 페이지 번호
    , getfinalPageNo: function (totalCount, pageSize) {
        var finalPageNo = parseInt(totalCount / pageSize);
        if (totalCount % pageSize > 0) {
            finalPageNo++;
        }
        return finalPageNo;
    }
}

 

 

▽ jsp파일

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>


<script type="text/javascript" src="/someFolder/paging.js %>"></script>
<script type="text/javascript" src="/someFolder/data.js %>"></script>

<h1>페이징 예제</h1>

<table>
    <colgroup>
        <col width="10%">
        <col width="35%">
        <col width="40%">
        <col width="15%">
    </colgroup>
    <thead>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>내용</th>
            <th>작성자</th>
        </tr>
    </thead>
    <tbody id="dataList">
    </tbody>
</table>
<br/>
<br/>
<!-- 페이징 -->
<div>
    <nav>
        <ul class="pagination" id="pagination"></ul>
    </nav>
</div>

 

 

▽ data.js

let pageNum = 1;
let pageSize = 50;

document.addEventListener("DOMContentLoaded", function(event) {
    // 비동기로 페이징 데이터 호출
    DataFunc.getPagingData(1);
});


const DataFunc = {
    getPagingData: function(pageNum){
        let params = {
            "startOffset": pagingUtil.getStartOffset(pageNum, pageSize)
            , "endOffset": pageSize
        }
        
        // https://zero-gravity.tistory.com/331 참고.
        apiFetchPost("/test/getPagingList", params, function(resData) {
            console.log("페이징 데이터 컴온-");
            PrintFunc.printPagingData(resData);     
        });
    },
    pagingPagingData: function(pNum){
        pageNum = pNum;
        DataFunc.getPagingData(pageNum);
    }
}

const PrintFunc = {
    printPagingData: function(resData){
        console.log(resData);

        let htmlResult = "";
        resData.dataList.forEach(data => {
            htmlResult += "<tr>"
                                + "<td>"
                                    + data.no
                                + "</td>"
                                + "<td>"
                                    + data.title
                                + "</td>"
                                + "<td>"
                                    + data.content
                                + "</td>"
                                + "<td>"
                                    + data.creator
                                + "</td>"
                            + "</tr>";
        });

        document.getElementById("dataList").innerHTML = htmlResult;
        document.getElementById("pagination").innerHTML = pagingUtil.pagingView(pageNum, pageSize, resData.COUNT, "DataFunc.pagingPagingData");
    }
}

 

 

▽ 컨트롤러단

@ResponseBody
@RequestMapping("/getPagingList")
public JSONObject getPagingList(@RequestParam HashMap<String, Object> params) throws Exception {
    int startOffset = Integer.parseInt(String.valueOf(params.get("startOffset")));
    int endOffset = Integer.parseInt(String.valueOf(params.get("endOffset")));
    params.put("startOffset", startOffset);
    params.put("endOffset", endOffset);

    // DB에서 목록 조회
    List<HashMap<String, Object>> pagingList = someService.getPagingList(params);
    int pagingListCnt = someService.getPagingListCnt(params); // 목록 총 개수 조회

    HashMap<String, Object> resultMap = new HashMap<String, Object>();
    resultMap.put("dataList", pagingList);
    resultMap.put("COUNT", pagingListCnt);

    JSONObject result = new JSONObject(resultMap);

    return result;
}

 

 

-----서비스단, 다오단은 생략한다-----

 

 

▽ mapper 쿼리 (mssql 기준)

<!--페이징 예제 데이터 목록 조회-->
<select id="getPagingList" parameterType="java.util.HashMap" resultType="java.util.HashMap">
  SELECT 
          no
          , title
          , content
          , creator
  FROM table
  ORDER BY no DESC
  OFFSET #{startOffset} ROWS
  FETCH NEXT #{endOffset} ROWS ONLY
</select>

<!--페이징 예제 데이터 개수 조회. 만약 목록 조회 시 조건이 있을 경우 여기도 조건을 같이 넣어줘야 함.-->
<select id="getPagingListCnt" parameterType="java.util.HashMap" resultType="int">
  SELECT 
          COUNT(*)
  FROM table
</select>