본문 바로가기

스프링 프레임워크

Paging 페이징 구현 [Thymeleaf]

Controller

package com.saltlux.newsSearcher.newsSearcher.controller;

import com.saltlux.newsSearcher.newsSearcher.service.NewsSearchService;
import com.saltlux.newsSearcher.vo.ResultVO;
import com.saltlux.newsSearcher.vo.SearchVO;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class NewsController {

    static SearchVO searchVoInfo;
    @Autowired
    NewsSearchService newsSearchService;

    @GetMapping("/newsSearch")
    public String newsSearch() {
        return "newsSearcher";

    }

    //paging 했을때 pageNum이 같이 넘어와 해당 페이지에 대한 뉴스 리스트를 반환
    @GetMapping("/news/search")
    public String searchResult(String page, Model model) {
        int pageNum = 1;
        ResultVO resultVO = null;

        //page의 값이 없을때 처리
        if (page == null || page == "") {
            pageNum = 1;
        } else {
            pageNum = Integer.parseInt(page);
        }

        try {
            resultVO = newsSearchService.search(searchVoInfo, pageNum, 10);
            if (resultVO == null) {
                throw new Exception();
            }
            model.addAttribute("newsList", resultVO.getNewsList());

            int pageNumber = pageNum;
            int pageSize = 10;
            int startPage = (pageNumber / pageSize) * pageSize + 1;
            int totalPages = resultVO.getTotalCnt() / pageSize;
            if (resultVO.getTotalCnt() % pageSize > 0) {
                totalPages++;
            }

            model.addAttribute("pageNumber", pageNumber);
            model.addAttribute("pageSize", pageSize);
            model.addAttribute("totalPages", totalPages);
            model.addAttribute("startPage", startPage);
            System.out.println("totalPage:" + totalPages);

        } catch (Exception e) {
            e.printStackTrace();
        }
        return "newsSearchResult";
    }

}

 

View (.html)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>
        뉴스 검색 시스템
    </title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link href="https://fonts.googleapis.com/css?family=Do+Hyeon|Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean"
          rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Jua&display=swap&subset=korean" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Stylish&display=swap&subset=korean" rel="stylesheet">

    <style>
            table {
                width: 100%;
                border: 1px solid #444444;
                border-collapse: collapse;
            }
            .positionHead{
                max-width: 1500px;
                min-width: 500px;
                margin:0 auto;
                margin-top: -15px;

            }
            .positionBody{
                max-width: 1500px;
                margin:0 auto;
                margin-top: 110px;
            }
            a {
                display: inline-block;
                transition: .3s;
                -webkit-transform: scale(1);
                transform: scale(1);
                text-decoration: none;
                color: #000000;
            }
            #ulStyle{
                margin-left: 100px;
                padding: 10px;
                width: 1300px;
                height: 70px;
            }
            #liStyle{
                font-family: 'Do Hyeon', sans-serif;
                font-size: 25px;
                list-style:none;
                float: left;
                padding:0px;
            }
            .jb-text {
                padding: 5px 10px;
                text-align: center;
                position: absolute;

                transform: translate( -50%, -50% );
                font-size: 50px;
                color: white;
                font-family: 'Noto Sans KR', sans-serif;
            }

            input[type=text]:focus{
                background: #add8e6;
            }
            input[type=password]:focus{
                background: #add8e6;
            }

    </style>
</head>
<body style="background:#edf1f8;" onload="InitializeStaticMenu();">
<div class="positionHead">
    <p title="검색 페이지로 이동"
       style="width:400px;padding-top: 70px;font-size:60px;font-family: 'Jua', sans-serif; margin-left:100px"><a
            href="/newsSearch" style="text-decoration:none; ">뉴스 검색 시스템</a>

    <!-- 페이징 소스 -->
    <div style="padding-left: 90px;">
        <nav aria-label="Page navigation"
             th:with="
                    pageNumber = ${pageNumber},
                    pageSize = ${pageSize},
                    totalPages = ${totalPages},
                    startPage = ${startPage},
                    endPage = (${(totalPages == 0) ? 1 : (startPage + (pageSize - 1) < totalPages ? startPage + (pageSize - 1) : totalPages)})
                    ">
            <ul class="pagination">
                <li th:if="${startPage > 1}" class="page-item">
                    <a class="page-link" th:href="@{/news/search(page=1)}" th:text="'<<'"></a></li>
                </li>

                <li th:if="${startPage > 1}" class="page-item">
                    <a class="page-link" th:href="@{/news/search(page=${startPage - pageSize})}" th:text="'<'"></a>
                </li>


                <li th:each="page: ${#numbers.sequence(startPage, endPage)}" class="page-item">
                    <a class="page-link" th:href="@{/news/search(page=${page-1})}" th:text="${page}"></a></li>
                </li>

                <li th:if="${endPage < totalPages}" class="page-item">
                    <a class="page-link" th:href="@{/news/search?(page=${startPage + pageSize})}" th:text="'>'"></a>
                </li>

                <li th:if="${endPage < totalPages}" class="page-item">
                    <a class="page-link" th:href="@{/news/search(page=${totalPages-1})}" th:text="'>>'"></a></li>
                </li>
            </ul>

    </div>
    </nav>
</div>

<br/>
<div>
    <table border="0" class="table table-striped">
        <thead>
        <tr>
            <th>카테고리</th>
            <th>신문사</th>
            <th>제목</th>
            <th>내용</th>
            <th>날짜</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="news : ${newsList}">
            <td style="width:50px" th:text="${news.category}"></td>
            <td style="width:300px" th:text="${news.author}"></td>
            <td style="width:200px" th:text="${news.title}"></td>
            <td style="width:3000px" th:text="${news.content}"></td>
            <td th:text="${news.date}"></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>