9. HTML에서 타임리프로 페이징 구현하기

이 전에 페이징을 구현해 본 적 있지만, 자바스크립트에서 구현했기 때문에, HTML 타임리프로는 어떻게 구현해야 할지 고민했었다. 하지만 오히려 자바스크립트에서 구현한 것보다 더 간단했다.

 

 

 

이렇게 게시물 조회 쿼리는 ORDER BY문과 LIMIT문을 추가한다. 한 페이지에 15개의 게시물을 나타내려 한다.

그리고 해당 게시판의 게시물 총 갯수를 구하는 쿼리도 사용한다.

 

 

지난번에 썼던 페이징 클래스

 

 

 

그 전에 해당 게시판으로 가는 경우 page라는 파라미터를 주소에 넣는다. 그리고 값은 1을 설정한다. 이 경로들에 전부 파라미터를 추가해야만 했었다.

 

 

 

그럼 page 파라미터가 불려저온다. 해당 게시판의 게시물 갯수를 우선 구하고, 페이징 클래스의 생성자의 파라미터에 현재 페이지, 한 페이지에 표시할 데이터의 수, 전체 데이터 갯수를 집어넣어, 페이징 계산을 한다.

 

page 파라미터는 곧 현재 페이지를 의미하고, 여기서 2, 3, 4 등등 숫자가 변하면 해당 페이지의 게시물들을 불러오는 방식이다. offset을 위한 계산을 한다. 현재 페이지가 1페이지인데, 여기서 1페이지-1을 하면 0이고 0 * 15는 0이므로 LIMIT 0, 15의 게시물들이 불려져 올 것이다. 2페이지면 또다시 계산대로 LIMIT 15, 15의 게시물이 불려져 올 것이고...

 

그리고 현재 페이지 넘버, 해당 페이지의 게시물들, 페이징 정보들을 Model로 뷰에 보낸다.

 

 

 

여기는 HTML, 게시물 쪽 HTML은 이미 맞게 작성되어 있었기 때문에 수정하지 않았다. 페이징 부분을 다음과 같이 수정했다. 그리고 현재 페이지를 값으로 둔 히든 input을 생성한다.

 

타임리프 문법을 이용했다. 만약 showPrev(이전표시여부)가 참일 경우 해당 태그를 나타내고, 거짓일 경우 해당 태그를 나타내지 않는다. showNext(이후표시여부) 역시 마찬가지로 한다.

 

each문을 이용하여 시작 페이지수와 끝 페이지수까지 버튼을 만든다. 그리고 그  버튼의 태그에 해당 수를 이름으로한 클래스를 걸어둔다. (표시를 위해)

 

그리고 마지막으로 전체 페이지수(totalPage)가 없다면.. (즉 게시물이 하나도 없다면) 페이징 태그들을 모두 나타내지 않는다.

 

 

 

 

 

마지막으로 자바스크립트로 가서 , 현재 페이지를 값으로 둔 hidden input을 불러오고 그렇게 불러온 현재 페이지의 수 값으로 현재 페이지 버튼을 클래스로 하여금 찾게 한다. 그리고 그 버튼의 스타일을 수정한다.

 

 

 

 

페이징이 잘 되는 것을 확인할 수 있었다.