페이징 라이브러리 (PageHelper + pagination)

Spring 환경에서 mybatis 또는 ibatis를 사용할 경우

PageHelper와 Pagination 라이브러리를 사용하면 아주 간단하게 페이징 작업이 가능하다

(JPA를 사용할 경우 Pageable을 사용)

 

PageHelper

1. 환경에 맞게 라이브러리를 추가 (SpringBoot 기준)

• pom.xml

<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.4.1</version>
</dependency>

 

2. import 추가

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;

 

3. 사용 예시

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import lombok.extern.slf4j.Slf4j;
import org.junit.jupiter.api.DisplayName;
import org.junit.jupiter.api.Test;
import org.junit.jupiter.api.extension.ExtendWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.ActiveProfiles;
import org.springframework.test.context.junit.jupiter.SpringExtension;

import java.util.List;

@Slf4j
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.MOCK)
@ExtendWith(SpringExtension.class)
@ActiveProfiles("local")
class PageHelperTest {

    @Autowired
    private PageHelperTestMapper pageHelperTestMapper;

    @Test
    @DisplayName("PageHelper 기반 페이징 조회 테스트")
    void selectByPageHelperTest() {
        // 현재 페이지 설정 (pageNum, pageSize)
        PageHelper.startPage(1, 10);
        // List<Test> testList = pageHelperTestMapper.selectTestList();
        PageInfo<Test> testPageInfo = PageInfo.of(pageHelperTestMapper.selectTestList());
        this.printCurrentPage(testPageInfo);
    }

    void printCurrentPage(PageInfo<UserTest> pageInfo) {
        log.info("이전 페이지: {}", pageInfo.getPrePage());
        log.info("현재 페이지: {}", pageInfo.getPageNum());
        log.info("다음 페이지: {}", pageInfo.getNextPage());
        log.info("첫번째 페이지인가?: {}", pageInfo.isIsFirstPage());
        log.info("마지막 페이지인가?: {}", pageInfo.isIsLastPage());
        log.info("이전 페이지가 존재하는가?: {}", pageInfo.isHasPreviousPage());
        log.info("다음 페이지가 존재하는가?: {}", pageInfo.isHasNextPage());
        log.info("페이지당 수량: {}", pageInfo.getPageSize());
        log.info("현재 페이지의 수량: {}", pageInfo.getSize());
        log.info("현재 페이지의 첫번째 요소에 대한 db table row number: {}", pageInfo.getStartRow());
        log.info("현재 페이지의 마지막 요소에 대한 db table row number: {}", pageInfo.getEndRow());
        log.info("전체 페이지 수: {}", pageInfo.getPages());
        log.info("전체 카운트: {}", pageInfo.getTotal());

		/* List 값 */
        List<Test> testList = pageInfo.getList();
        log.info("testList: {}", testList);

    }

}

 

---

pagination

1. script 선언

<!-- pagination JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.2/jquery.twbsPagination.min.js"></script>

 

2. Function 선언

• 공통으로 사용할 수 있도록 매개변수로 함수형태의 refreshCallback을 전달 받아서 처리

/* 함수 호출 */
setPagingList(totalCount, pageTotal, pageSize, pageNum, fn_selectTestList);


/* 페이징 처리 */
function setPagingList(totalCount, pageTotal, pageSize, pageNum, refreshCallback){

	/* 새로 그리기전에 기존에 남아있는 페이징 제거 */
    $('#pagination').twbsPagination('destroy');
    
    /* 필요 옵션만 사용. 옵션은 찾아보면 더 많음 */
    $('#pagination').twbsPagination({
        totalPages: pageTotal, // 전체 페이지
        startPage: pageNum, // 시작(현재) 페이지
        visiblePages: 5, // 최대로 보여줄 페이지
        initiateStartPageClick: false,	// 플러그인이 시작시 페이지 버튼 클릭 여부 (default : true)
        prev: "‹", // Previous Button Label
        next: "›", // Next Button Label
        first: '«', // First Button Label
        last: '»', // Last Button Label
        onPageClick: function (event, page) { // Page Click event
            //console.info("current page : " + page);
            refreshCallback(page);
        }
    });
}

 

 

3. div 추가

<div class="page_list">
    <ul class="pagination" id="pagination"></ul>
</div>