경매형 중개플랫폼 마취모 프로젝트 9일차 (검색 페이징)

0

Criteria

@Getter
@Setter
@AllArgsConstructor
public class Criteria {

    private int pageNum;
    private int amount;

    public Criteria(){
        this(1,10);
    }

}

크리테리아를 만들어주었다 pageNum과 amount 페이지 넘버는 지금 보고 있는 페이지의 번호 amoun는 화면에 몇개까지 출력 시켜줄건지를 뜻한다 배울때도 그렇고 찾아볼때도 그렇고 이게 정석인가보다
예전에 하이버네이트에서 있던게 Criteria라서 지금도 이름을 똑같이 쓴다는대 하이버네이트가 정확히 먼진 모른다...

PageDTO

@Getter
public class PageDTO {
      private int startPage; //시작페이지: 1,11
    private int endPage; //끝페이지: 10,20
    private boolean prev,next;
    private int total;
    private Criteria cri; //화면에 출력 갯수

    public PageDTO(int total, Criteria cri) {
        this.total = total;
        this.cri = cri;

//       ex>3페이지=3/10->0.3 -> 1 * 10 = 10(끝페이지)
//       ex>11페이지=11/10->1.1 -> 2 * 10 = 20(끝페이지)
        this.endPage = (int) Math.ceil(cri.getPageNum() / 10.0) * 10;
//       ex>10-9=1페이지
//       ex>20-9=11페이지
        this.startPage = this.endPage-9;

//       ex>total: 70, 현재 페이지: 3 -> endPage: 10 => 70*1.0 / 10 => 7페이지
//       ex>total: 300, 현재 페이지: 3 -> endPage: 10 => 300*1.0 / 10 => 30페이지
        int realEnd = (int)(Math.ceil((total * 1.0) / cri.getAmount()));

//        ex>7페이지 <= 10페이지 : endPage: 7페이지
//        ex>30페이지 <= 10페이지 : endPage: 10페이지
        if(realEnd <= this.endPage){
            this.endPage = realEnd;
        }
//        1페이지보다 크면 존재 -> 참이고 아님 거짓으로 없음
        this.prev = this.startPage > 1;
//        ex>10페이지 < 30페이지
        this.next = this.endPage < realEnd;
    }

설명은 주석으로 대체

Controller

    @RequestMapping("/searchList")
    public String search(
              @RequestParam String searchOption
            , @RequestParam String keyword
            , Model model
            , @ModelAttribute Criteria cri
    ) {
        System.out.println(searchOption);



        byte dSearchOption = decodedUrlToByte(searchOption);
        List<SearchVO> search = searchService.search(dSearchOption, keyword, cri);
        log.info("dSearchOption ==> {}",dSearchOption);
        log.info("cri.getPageNum() =====> {}" ,cri.getPageNum() );
        log.info("cri.getPageNum() =====> {}" ,cri.getPageNum() );


        int total = searchService.searchTotal(keyword);
        if (search.isEmpty()) {
            keyword = keyword + "에 대한 검색결과가 없습니다.";
            model.addAttribute("message", keyword);
            return "search/errorPage";
        } else {
            model.addAttribute("message", keyword);
            model.addAttribute("search", search);
            model.addAttribute("option", searchOption);
            model.addAttribute("pageMaker", new PageDTO(total, cri));

            return "search/searchPage";
        }

Test용 SerachDAO 매소드

 List<SearchVO>getListWithPaging(@Param("keyword")String keyword, @Param("cri") Criteria cri);
    int searchUsersTotal(String keyword);
    <select id="getListWithPaging" resultType="com.example.project_machimo.search.dto.SearchVO">
        <![CDATA[
SELECT *
FROM (
    SELECT
        p.PRODUCTS_ID as products_id,
        u.USER_ID as user_id,
        u.U_NICKNAME as u_nickname,
        i.i_ID as i_id,
        i.I_IMAGE as i_image,
        i.i_sub_img as i_sub_img,
        p.P_NAME as p_name,
        p.P_INFO as p_info,
        ROW_NUMBER() OVER (ORDER BY p.P_CREATED_AT) rn
    FROM USERS U
    JOIN PRODUCTS P ON U.USER_ID = P.USER_ID
    LEFT JOIN (
        SELECT PRODUCT_ID, I_ID, MIN(I_IMAGE) AS I_IMAGE, MIN(i_sub_img) as i_sub_img
        FROM PRODUCT_IMAGES
        GROUP BY PRODUCT_ID, I_ID
    ) i ON P.PRODUCTS_ID = i.PRODUCT_ID
    WHERE p.P_NAME LIKE '%'||#{keyword}||'%'
-->
)
WHERE rn > (#{cri.pageNum}-1) * 10 and rownum <= #{cri.pageNum}*#{cri.amount}
        ]]>
        <!--    WHERE p.P_NAME LIKE '%'||#{keyword}||'%' and p.PRODUCTS_ID > 0 and ROWNUM > 0 and rownum <= (#{cri.pageNum}*#{cri.amount}) -->
    </select>
    <select id="searchUsersTotal" resultType="java.lang.Integer">
        select count(*) from PRODUCTS
        where P_NAME like '%'||#{keyword}||'%'
    </select>

Controller


    @RequestMapping("/searchList")
    public String search(
              @RequestParam String searchOption
            , @RequestParam String keyword
            , Model model
            , @ModelAttribute Criteria cri
    ) {
        System.out.println(searchOption);



        byte dSearchOption = decodedUrlToByte(searchOption);
        List<SearchVO> search = searchService.search(dSearchOption, keyword, cri);
        log.info("dSearchOption ==> {}",dSearchOption);
        log.info("cri.getPageNum() =====> {}" ,cri.getPageNum() );
        log.info("cri.getPageNum() =====> {}" ,cri.getPageNum() );


        int total = searchService.searchTotal(keyword);
        if (search.isEmpty()) {
            keyword = keyword + "에 대한 검색결과가 없습니다.";
            model.addAttribute("message", keyword);
            return "search/errorPage";
        } else {
            model.addAttribute("message", keyword);
            model.addAttribute("search", search);
            model.addAttribute("option", searchOption);
            model.addAttribute("pageMaker", new PageDTO(total, cri));

            return "search/searchPage";
        }

페이징을 위한 html

<div class="div_page">
    <ul>

        <th:block th:if="${pageMaker.prev}">


            <li class="paginate_button">
                <a th:href="${pageMaker.startPage+1}">
                    [Previous]
                </a>

            </li>
        </th:block>
        <th:block th:each="num :${#numbers.sequence(pageMaker.startPage,pageMaker.endPage)}">

            <li class="paginate_button" th:style="${pageMaker.cri.pageNum == num ? 'background-color: yellow' : ''}">
                <a th:href="${num}">
                    <h1 th:text="${num}" ></h1>
                </a>
            </li>

        </th:block>
    </ul>
    <th:block th:if="${pageMaker.next}">
        <a th:href="${pageMaker.endPage+1}">
            [Next]
        </a>
    </th:block>
</div>
<span id="option" hidden="hidden" th:text="${option}"></span>
<form method="get" id="actionForm" action="searchList">
    <input type="hidden" name="pageNum" th:value="${pageMaker.cri.pageNum}">
    <input type="hidden" name="amount" th:value="${pageMaker.cri.amount}">
    <input type="hidden" name="keyword" th:value="${message}">
    <input type="hidden" name="searchOption" th:value="${option}" id="searchOption">
</form>

<th:block th:replace="fragments/footer :: footerFragment"></th:block>
</body>
</html>
<script>
  var actionForm = $("#actionForm");
    var option = $("#option").val();
    
    $(".paginate_button a").on("click", function (e){
        // 기본 동작 막음: 페이지 링크를 통해서 이동
        e.preventDefault();
        console.log("click~!");
        console.log("@# href ===>"+$(this).attr("href"));
        actionForm.find("input[name='pageNum']").val($(this).attr("href"));
        actionForm.find("input[name='searchOption']").val(option)

        actionForm.submit();
    });
    

</script>

지금 코드가 이런데
많은 사연이 었었다 이렇


일단 이렇게 대충 페이징 화면을 구현 했는데 10개 까진 나온다 근데 문제는

이렇게 에러가난다 그 이유는 일단


 byte dSearchOption = decodedUrlToByte(searchOption);

  private byte decodedUrlToByte(String url) {

        try {
            url = URLDecoder.decode(url, "UTF-8");

        } catch (UnsupportedEncodingException e) {
            throw new RuntimeException(e);
        }
        url = url.substring(url.length() - 1);

        return Byte.parseByte(url);

    }

자바에 있는 이 부분이 문제인데

url에 값이

http://localhost:8090/search/searchList?pageNum=2&amount=10&keyword=%ED%8C%90%EB%A7%A4&searchOption=

이렇게 되어 있기 떄문

searchOption=에 값이 존재하지 않는다....
처음엔 존재했어서 디코딩해서 값을 받아왔는데 바꾸고 바꾸다 보니
전에 어떻게 헀는지 기억이 안ㄴ나다.... 진짜
그냥 처음부터 검색해서 최대한 비슷한 자료를 찾아서 해야겠다

처음으로 하루만에 해결못한 문제가 생겼다

이슈사항

searchOption에 값이 안 넘어와서 페이징 처리가 힘듦

앞으로 할 일일

1. 페이징 처리 공부

2. 페이징 프론트 수정

오늘 느낀점

자괴감과 허탈함

0개의 댓글