SpringBoot.Gradle.mybatis.postgresql.thymeleaf.paging.pagehelper(페이지헬퍼로 페이징하기)

초기 설정: 전체 목록을 가지고 오는 것을 구현해 놓는다.

 

1. gradle에 dependency 추가

// application.properties
#paging
pagehelper.helper-dialect=postgresql
pagehelper.reasonable=true
pagehelper.support-methods-arguments=true

 

---

2. controller or service 에서 paging적용

package com.example.newsAnalysis.service;

@Service
public class CollectionDataService {
    @Autowired
    CollectionMapper mapper;

    public List<CollectionStatusVO> dataStatus(InputVO inputVO) {
        return mapper.dataStatus(inputVO);
    }


    public Page<CollectionInfoVO> dataInfo(InputVO inputVO) {
        PageHelper.startPage(inputVO.getPageNum(), 10); // 앞 파라미터는 현재 페이지, 뒤 파라미터는 한 페이지에 보여줄 row수
        return mapper.dataInfo(inputVO);
    }


}

PageHelper.startPage: 자동으로 서브쿼리를 사용해서 전체 페이지와 페이징에 필요한 속성들을 가지고 오게 된다.

전체 불러오는 메소드를 만들고 마지막에 return type을 Page<>로 설정
mapper,service(, controller)

 

3. view단에서 현재 페이지를 받아오기위해 모델을 설정한다

package com.example.newsAnalysis.model;

import lombok.Data;

@Data
public class searchVO {
    int pageNum;
}

package com.example.newsAnalysis.model;

import lombok.AllArgsConstructor;
import lombok.Data;

@Data
@AllArgsConstructor
public class InputVO extends searchVO {
    String startDate;
    String endDate;
    String classification;
    String division;
    String searchKeyword;

}

---

4. view를 설정한다.

<form method="post" th:action="@{view}" name="info" id="info">

>>>>>>>>>>>>>form 안에 hidden으로 현재 페이지 위치를 보낸다
    <input type="hidden" name="pageNum" id="pageNum" th:value="${inputVO.pageNum}">


    <table>
        <tr>
            <th>
                <input name="startDate" th:value="${inputVO.startDate}" type="date">
                <input name="endDate" th:value="${inputVO.endDate}" type="date">
                <select name="classification">
                    <option value="">분류</option>
                    <option value="사회">사회</option>
                    <option value="정치">정치</option>
                    <option value="경제">경제</option>
                    <option value="문화">문화</option>
                    <option value="IT">IT</option>
                    <option value="기타">기타</option>
                </select>
                <select name="division">
                    <option value="n.title">뉴스명</option>
                    <option value="k.keyword">키워드</option>
                    <option value="n.author">언론사</option>
                </select>
                <input name="searchKeyword" placeholder="검색어를 입력하세요" th:value="${inputVO.searchKeyword}"
                       type="search">
                <input type="submit" value="검색">
            </th>
        </tr>
    </table>
    <br>
    <table border="1" class="table">
        <tr>
            <th>No</th>
            <th>분류</th>
            <th>뉴스명</th>
            <th>언론사</th>
            <th>키워드</th>
            <th>날짜</th>
        </tr>
        <tr th:each="info,status : ${dataInfo}">
            <td th:text="${info.index}"></td>
            <td th:text="${info.classification}"></td>
            <td th:text="${info.title}"></td>
            <td th:text="${info.author}"></td>
            <td th:text="${info.keyword}"></td>
            <td th:text="${#dates.format(info.uploadDate,'yyyy-MM-dd HH:mm:ss')}"></td>
        </tr>
    </table>
    >>>>>>>>>>>>> 페이징 관련 소스를 불러온다
    <div th:insert="/common/pagination :: pagination(${dataInfo})"></div>

</form>

>>>>>>>>>>>>jquery와 css를 불러온다
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="/css/bootstrap.min.css" />

>>>>>>>>>>>>js로 페이지 버튼 값을 전달한다.
<script>
    var formName = $("#info"); // <<<<< $("#info") : form id (not name)

    //페이지 이동
    $(".pagination a").click(function (e) { // <<<<< pagination이라는 class의 a태그가 클릭되면 함수 시작
        e.preventDefault(); // <<<<< 원래 a태그의 기본 동작을 막는다
        $('#pageNum').val($(this).attr('href')); // <<<<< pageNum이라는 변수에 href에 들어있는 값을 넣는다
        formName.attr("action", "view").submit(); // <<<<< form을 submit한다(action은 view)
    });
</script>

css/js

https://drive.google.com/drive/folders/1y6FXnZTOLSSQkkMu7rR7lrSaXC-93Dpu?usp=sharing