[PageHelper] 페이지 헬퍼 네비게이션 및 유틸

Spring + mybatis +  thymeleaf  

// 현재 페이지
private int pageNum;
// 페이지당 수량
private int pageSize;
// 현재 페이지 수
private int size;
// 현재 페이지의 첫 번째 요소가 데이터베이스에 있는 줄 번호 
private long startRow;
// 현재 페이지의 마지막 요소가 데이터베이스에 있는 줄 번호 
private long endRow
// 전체 페이지 수
private int pages; 
// 이전 페이지
private int prePage; 
// 다음 페이지
private int nextPage;
// 첫 페이지인지 여부
private boolean isFirstPage = false;
// 마지막 페이지인지 여부
private boolean isLastPage = false;
// 이전 페이지가 있는지 여부
private boolean hasPreviousPage = false;
// 다음 페이지가 있는지 여부
private boolean hasNextPage = false;
// 내비게이션 페이지 번호
private int navigatePages;
// 모든 내비게이션 페이지 번호 
private int[] navigatepageNums ; 
// 내비게이션 바의 첫 페이지 
private int navigateFirstPage; 
// 내비게이션 바의 마지막 페이지 
private int navigateLastPage;

 

페이지 헬퍼 네비게이션용 유틸

 

페이지 헬퍼를 쓰면 페이지 네비가 [ 2 , 3 , 4 ,5 , 6 ]  [ 4 , 5 , 6  , 7 , 8 ]  이런 식으로 잡힘

그걸 [ 1 , 2 , 3 , 4 , 5 ]   [ 6 , 7 , 8 , 9 , 10 ] 이런 식으로 바꾸는 유틸

public class PageHelperUtil {

	/*
    * int NavigatePages = 5
    * PageInfo<Map<String , Object>> list= new PageInfo<>(List , NavigatePages );
    * PageHelperUtil.redefineNavigation(list) ; 
    * DB 조회한 list를 PageHelperUtil.redefineNavigation 매개변수로 사용 
    */
    
    public static PageInfo<Map<String , Object>> redefineNavigation(PageInfo<Map<String , Object>> list){

        // 페이지 배열
        int[] nav = list.getNavigatepageNums();
        // 몇 페이지
        int navigatePages = list.getNavigatePages();
        // 현재 페이지
        int currentPage = list.getPageNum();
        // 총 페이지 수
        int total = list.getPages();
        // 배열 길이
        int navLength = nav.length;

        if(navLength != 0){
            int ff = (int) Math.ceil((double) nav[navLength -1] / navigatePages);

            int gg = ff * navigatePages;

            if(gg - currentPage >= navigatePages){
                gg = gg - navigatePages;
            }else if(gg == 0){
                gg = navigatePages;
            }

            if(gg > total && total >= navigatePages ){
                navLength = total%navigatePages;
            }

            int[] nav2 = new int[navLength];
            gg = gg - (navigatePages - 1);
            for(int i = 0 ; i < nav2.length ; i++){
                nav2[i] = gg++;
            }
            list.setNavigatepageNums(nav2);
            list.setNavigateFirstPage(nav2[0]);
            list.setNavigateLastPage(nav2[nav2.length -1]);
        }

        return list;
    }
}

 

이런식으로 쓰면 됨

 

Thymeleaf  + bootStrap 네비게이션

 

${info} 는 PageInfo 

<nav class="d-flex justify-content-center align-items-center">
    <ul class="pagination">
        <li class="page-item" th:classappend="${#lists.size(info.navigatepageNums) == 0  || info.navigatepageNums[0] < info.getNavigatePages() } ? 'disabled'">
            <a class="page-link" href="javascript:void[0]" onclick="movePage('1')">&laquo;</a>
        </li>
        <li class="page-item" th:classappend="${#lists.size(info.navigatepageNums) == 0 || info.navigatepageNums[0] < info.getNavigatePages()} ?  'disabled'">
            <a class="page-link" href="javascript:void[0]"
               th:onclick="movePage([[${info.getNavigateFirstPage() - 1}]])">&lt;</a>
        </li>
        <li class="page-item" th:if="${#lists.size(info.navigatepageNums)} != 0" th:each="num : ${#numbers.sequence(info.getNavigateFirstPage(), info.getNavigateLastPage())}" th:classappend="${num == info.getPageNum()} ? 'active'">
            <a class="page-link" href="javascript:void[0]" th:onclick="movePage([[${num}]])">[[${num}]]</a>
        </li>
        <li class="page-item" th:classappend="${info.getPages() == info.getNavigateLastPage()}  ?  'disabled'"><a class="page-link" href="javascript:void[0]" th:onclick="movePage([[${info.getNavigateLastPage() + 1}]])">&gt;</a>
        </li>
        <li class="page-item" th:classappend="${info.getPages() == info.getNavigateLastPage()}  ? 'disabled'">
            <a class="page-link" href="javascript:void[0]" th:onclick="movePage([[${info.getPages()}]])">&raquo;</a>
        </li>
    </ul>
</nav>

 

classappend 에 있는 disabled 

.disabled {
    display: none;
}

 

movePage 함수

const movePage = (page = 1) => {
	//페이지 이동 or 비동기 통신 등등 
}