韓日

ページング

ページnation

ほうそう

後で概念を補充する必要がある
OracleのROWNUMの使用方法
1.すべてのデータ行をソートし、必要な順序を入力します.
2.必要なデータのみを並べ替え、すぐにインポート
MySQLのLIMITの使い方LIMIT <skip> <count>

# 처음부터 3개 건너뛴 후 4개 출력
SELECT * FROM board LIMIT 3, 4;

ページング・オブジェクトの作成

処理するページの変数を格納するクラスを作成
- Criteria -

public class Criteria {

	private int pageNum;	// 현재 페이지
	private int amount;	// 한 페이지당 보여질 게시물 수
	private int skip;	// 스킵할 게시물 수 ((pageNum - 1 ) * amount)

	// 기본생성자 => 기본세팅: pageNum = 1, amount = 10
	public Criteria() {
		this(1, 10);	// 전체 생성자를 통해 (1, 10)을 입력해 객체 생성
	}

	// 생성자 => 원하는 pageNum, 원하는 amount
	public Criteria(int pageNum, int amount) {
		this.pageNum = pageNum;
		this.amount = amount;
		this.skip = (pageNum - 1 ) * amount;
	}

	public int getPageNum() {
		return pageNum;
	}

	// 새로 페이지 수를 설정했을 때 skip도 계산
	public void setPageNum(int pageNum) {
		this.pageNum = pageNum;
		this.skip = (pageNum - 1 ) * amount;
	}

	public int getAmount() {
		return amount;
	}

	// 페이지당 데이터 갯수를 바꿀 경우에도 skip을 다시 계산
	public void setAmount(int amount) {
		this.amount = amount;
		this.skip = (pageNum - 1 ) * amount;
	}

	public int getSkip() {
		return skip;
	}

	public void setSkip(int skip) {
		this.skip = skip;
	}

	@Override
	public String toString() {
		return "Criteria [pageNum=" + pageNum + ", amount=" + amount + ", skip=" + skip + "]";
	}
}

skip(ジャンプする投稿数)は計算によって作成されます.入力したフィールドはpageNumとamountのみです.
skipは計算によって生成されるフィールドであるため、pageNumまたはamountの数値が変化するとsetメソッドの作成時に計算式が記述されます.

ページングクエリ文の作成

- BoardMapper -

// 게시판 목록(페이징 적용). pageNum과 amount를 입력받아 객체 cri생성. 없으면 기본값(1, 10)적용
public List<BoardVO> getListPaging(Criteria cri);		

ページを適用する掲示板のリストをロードするリストを追加します.
- BoardMapper.xml -

<!-- 게시판 목록 (페이징) : skip과 amount는 Criteria 객체에서 입력됨 -->
<select id="getListPaging" resultType="BoardVO">
	SELECT * FROM (
			SELECT bno, title, writer, regdate, updatedate
			FROM board ORDER BY bno DESC) as T1
	LIMIT #{skip}, #{amount}
</select>

bno大=最新の投稿を最上位の順序でロード

TRUNCATE TABLE board;	# 모든 행 삭제

# 프로시저 시작
DELIMITER $$	
DROP PROCEDURE IF EXISTS procedureName$$
 
CREATE PROCEDURE procedureName()
BEGIN
    DECLARE i INT DEFAULT 1;
        
    WHILE i <= 100 DO
        INSERT INTO board(title , content, writer, regDate, updateDate)
          VALUES( concat('제목',i), '테스트 데이터 에요', '작가' , now(),  now());
        SET i = i + 1;
    END WHILE;
END$$
DELIMITER $$

CALL procedureName; 	# 프로시저 호출

プログラム内にハングルコメントがある場合は、実行できません.
プロセスを実行すると、100個のデータが挿入されます.

テスト

- BoardMapperTests -

// 페이징 테스트		
 @Test
 public void testGetListPaging() {
     Criteria cri = new Criteria();
     List<BoardVO> list = boardMapper.getListPaging(cri);
     list.forEach(board -> log.info("" + board));
 }

デフォルトでは、ページごとに10の投稿が表示されます.
pagenumとamountを2,5に変えてテストします.

@Test
 public void testGetListPaging() {
     Criteria cri = new Criteria();
     cri.setPageNum(2);
     cri.setAmount(5);
     List<BoardVO> list = boardMapper.getListPaging(cri);
     list.forEach(board -> log.info("" + board));
 }

ページングをサービスに適用

- BoardService -

public List<BoardVO> getListPaging(Criteria cri);	// 페이징 적용 게시글목록

- BoardServiceImpl -

@Override
public List<BoardVO> getListPaging(Criteria cri) {
	return boardMapper.getListPaging(cri);
}

- BoardController -

@GetMapping("/list")
public String boardListGet(Criteria cri, Model model) {
	// boardList에 모든 게시글을 전달
	model.addAttribute("boardList", boardService.getListPaging(cri));
	return "list";
}

元のBoardListGetメソッドでは、コメント後にページングされた投稿リストを渡すための新しいメソッドが作成されます.
criに値を指定しない場合は、デフォルト値(1,10)が適用されます.値を指定すると、現在のページと1ページあたりの投稿数が変更されます.
http://localhost:8080/board/list

/listにアクセスすると、元のページングの最初のページのみが出力されます.
http://localhost:8080/board/list?pageNum=5&amount=15

parameterを使用してpageNumとamountに値を渡し、現在のページと各ページの投稿数を変更できます.

ページ番号

ページ計算用のクラスの作成
- PageMakerDTO -

private int startPage;		// 시작 페이지
private int endPage;		// 끝 페이지
private boolean prev, next;	// 이전, 다음페이지 존재유무
private int total;			// 전체 게시글 수
private Criteria cri; 		// 현재 페이지, 페이지당 게시글 표시 수 정보

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

	// 마지막페이지(현재 페이지네이션바의 마지막 숫자): 10 단위로 표시 1~10, 11~20, 21~30
	// Math.ceil은 소수점을 정수로 올림
	this.endPage = (int)(Math.ceil(cri.getPageNum() / 10.0)) * 10;
	
	// 시작 페이지
	this.startPage = this.endPage - 9;
	
	// 실제 마지막 페이지 (총 마지막 페이지)
	int realEnd = (int)(Math.ceil(total * 1.0 / cri.getAmount()));
	
	// 전체 마지막 페이지(realEnd)가 화면에 보이는 마지막페이지(endPage)보다 작은 경우, 보이는 페이지(endPage) 값 조절
	if(realEnd < this.endPage) {
		this.endPage = realEnd;
	}

	// < 이전페이지 참? 시작 페이지(startPage)값이 1보다 큰 경우 true
    this.prev = this.startPage > 1;
    
    // > 다음페이지 참? 마지막 페이지(endPage)값이 1보다 큰 경우 true
    this.next = this.endPage < realEnd;
}
// get/set toString 메서드 자동생성

ceilはリフト関数ですpageNumが1であれば、0.1=>上向きであり、0.1~1.0の間はいずれも1である.すなわち、pagenumは1から10まで1である.
=>現在のページが1-9の場合、終了ページはすべて10です.ページ番号バーには、1から10までのページ番号が表示されます.
- BoardMapper -

public int getTotal();	// 게시글 총 갯수

合計投稿数の計算方法の追加
- BoardMapper -

<!-- 게시글 총 갯수 -->
<select id="getTotal" resultType="int">
	SELECT count(*) FROM board;
</select>

テスト

- BoardMapperTests -

// 총 게시글 수
 @Test
 public void testGetTotal() {
	 int result = boardMapper.getTotal();
	 log.info("총 개시글 수: " + result);
 }

ページ名をサービスに適用

- BoardService -

public int getTotal();	// 게시글 총 갯수

- BoardServiceImpl -

@Override
public int getTotal() {
	return boardMapper.getTotal();
}

- BoardController -
bordListGetの変更

// 게시글 목록 페이지 (페이징 적용)
@GetMapping("/list")
public String boardListGet(Criteria cri, Model model) {
	// boardList에 페이징 된 모든 게시글을 전달
	model.addAttribute("boardList", boardService.getListPaging(cri));
	
	int total = boardService.getTotal();
	PageMakerDTO pmk = new PageMakerDTO(total, cri);	// 객체 생성 시 모든 변수 계산됨
	
	model.addAttribute("pmk", pmk);		// 페이지네이션을 위한 pmk객체 전달
	
	return "list";
}

- list.html -

<nav aria-label="Page navigation" th:if="${pmk.endPage > 0}">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="javascript:;" aria-label="이전">
        <span class="material-icons"> keyboard_arrow_left </span>
        <span class="sr-only">이전</span>
      </a>
    </li>

    <li class="page-item" th:each="number : ${#numbers.sequence(1, pmk.endPage)}"><a class="page-link" href="javascript:;" th:text="${number}"></a></li>

    <li class="page-item">
      <a class="page-link" href="javascript:;" aria-label="다음">
        <span class="material-icons"> keyboard_arrow_right </span>
        <span class="sr-only">다음</span>
      </a>
    </li>
  </ul>
</nav>