페이징

 

drop table answer 

drop table question 으로

테이블 삭제함

 

	@Autowired
	private QuestionService qService;

			for(int i =1; i<=300; i++) {
			String subject = String.format("테스트 데이터입니다:[%03d]", i);
			String content = "내용무";
			qService.create(subject, content);

 

 

 

데이터 300개 입력 확인

 

 

 

 

스크롤이 너무 길어지기 때문에 페이징을 하려함

 

 

QuestionRepository

package com.mysite.sbb.question;

import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;

public interface QuestionRepository extends JpaRepository<Question, Integer>{

	Question findBySubject(String subject);
	Question findBySubjectAndContent(String subject,String content);//제목과 내용이 같을 때
	//페이징-모든 질문을 페이지 별로 가져온다. 
	Page<Question> findAll(Pageable pageable);

}

 

 

 

QuestionService

	public Page<Question> getList(int page){
		Pageable pageable = PageRequest.of(page, 10); //한 페이지에 10개
		return this.qRepo.findAll(pageable); //모든 질문 리스트
	}

 

 

 

QuestionController

	//페이징 추가
	@GetMapping("/list")
	public String list(Model model,@RequestParam(value = "page",defaultValue = "0") int page) {
		Page<Question> paging = this.qService.getList(page);
		model.addAttribute("paging", paging);
		return "question_list";
	}

 

 

 

 

 

 

 

 

 

 

question_list.html 에 페이지네이션 추가

    </table>
    <!-- 페이징처리 시작 -->
    <div th:if="${!paging.isEmpty()}">
        <ul class="pagination justify-content-center">
            <li class="page-item" th:classappend="${!paging.hasPrevious} ? 'disabled'">
                <a class="page-link"
                    th:href="@{|?page=${paging.number-1}|}">
                    <span>이전</span>
                </a>
            </li>
            <li th:each="page: ${#numbers.sequence(0, paging.totalPages-1)}"
                th:classappend="${page == paging.number} ? 'active'" 
                class="page-item">
                <a th:text="${page}" class="page-link" th:href="@{|?page=${page}|}"></a>
            </li>
            <li class="page-item" th:classappend="${!paging.hasNext} ? 'disabled'">
                <a class="page-link" th:href="@{|?page=${paging.number+1}|}">
                    <span>다음</span>
                </a>
            </li>
        </ul>
    </div>
    <!-- 페이징처리 끝 -->
    <a th:href="@{/question/create}" class="btn btn-primary">질문 등록하기</a>

 

 

 

이전 페이지가 없을 경우에는 비활성화

0부터 모든페이지-1까지 / 1부터 시작하면 totalPages만 해도됨 

페이지가 현재 페이지와 동일하면 active

다음 페이지가 없을 경우에는 비활성화

 

 

https://blog.naver.com/drv982/222921148858

 

 

 

테스트 해보면 출력은 되는데, 

전체 페이지가 나옴 

그래서 10번까지만 나오도록 수정할거임 

 

 

 

          <li th:each="page: ${#numbers.sequence(0, paging.totalPages-1)}"
              th:if="${page >= paging.number-5 and page <= paging.number+5}"
              th:classappend="${page == paging.number} ? 'active'" class="page-item">

 

 

 

 

 

마지막으로 작성일시를 역순으로(desc)로 조회하게 수정할거임

QuestionService- getlist

	public Page<Question> getList(int page){
		Pageable pageable = PageRequest.of(page, 10, Sort.by("createDate").descending()); //한 페이지에 10개
		return this.qRepo.findAll(pageable); //모든 질문 리스트
	}

deata.domain Sort

 

작성일자로 내림차순 

 

첫페이지는 300부터 나옴