[JavaScript] 페이징 Paging

안녕하세요 javascirpt를 사용하면서 페이징을 사용해야 되는 경우가 있는데 이런 경우에 아래와 같이 사용하면 바로 페이지를 적용 할 수 있습니다.

 

//totalData = 총 데이터 count
//dataPerPage = 한페이지에 나타낼 데이터 수
//pageCount = 한화면에 나타낼 페이지 수
//currentPage = 선택한 페이지
function fnPaging(totalData, dataPerPage, pageCount, currentPage) {
    let totalPage = Math.ceil(totalData / dataPerPage); // 총 페이지 수
    let pageGroup = Math.ceil(currentPage / pageCount); // 페이지 그룹
    if (pageCount > totalPage) pageCount = totalPage;
    let last = pageGroup * pageCount; // 화면에 보여질 마지막 페이지 번호
    if (last > totalPage) last = totalPage;
    let first = last - (pageCount - 1); // 화면에 보여질 첫번째 페이지 번호
    let next = last + 1;
    let prev = first - 1;

    let prevPage;
    let nextPage;
    if (currentPage - 1 < 1) {
        prevPage = 1;
    } else {
        prevPage = currentPage - 1;
    }
    if (last <= totalPage) {
        if((currentPage + 1) > totalPage){
            nextPage = last;
        }else{
            nextPage = currentPage + 1;
        }
    } else {
        nextPage = last;
    }
    
    /**                 페이징을 아래서 만들면 됩니다. (InnerHTML 사용)            **/
}

 

버튼을 클릭 시 데이터를 가져와서 뿌려주고, 파라미터에 맞춰서 데이터를 보여준다면 페이지를 쉽게 할 수 있습니다.