[Web] 부트스트랩 적용하기, Pagination (게시판 구현)

부트스트랩의 Pagination 컴포넌트를 적용해보자

  페이징 처리하기에서 구현했던 하단 페이지 링크에 부트스트랩의 Pagination Component를 적용해보자. list.jsp에서 페이징 처리했던 코드를 아래와 같이 변경하자.

<!-- list.jsp 변경 부분 -->

<%-- <div id="paging">
	${pageCode}
</div> --%>

<!-- Paging 처리, Bootstrap -->
<nav aria-label="..." style="text-align: center;">
	<ul class="pagination">
		${pageCode}
	</ul>
</nav>

  페이징 처리를 해주는 Page클래스를 아래와 같이 변경하자. 변경된 부분은 주석이 달려있는 태그들을 작성하는 부분이다. 이전의 불필요한 주석이나 변경 이전의 코드들은 삭제하였다.

package com.edu.bbs;

public class Page {
	private static Page page = new Page();
	private int startRow, endRow;
	private StringBuffer sb;

	private Page() {}
	
	public static Page getInstance() {
		if(page == null) {
			page = new Page();
		}
		return page;
	}
	
	public synchronized void paging(int pageNum, int totalCount, int pageSize, int pageBlock) {
		int totalPage = (int)Math.ceil((double)totalCount/pageSize);
		startRow = (pageNum - 1) * pageSize + 1;
		endRow = pageNum * pageSize;
		
		int startPage = (int)((pageNum - 1)/pageBlock) * pageBlock + 1;
		int endPage = startPage + pageBlock - 1;
		
		if(endPage > totalPage) {
			endPage = totalPage;
		}
		
		sb = new StringBuffer();
		
		// Page클래스 변경 부분
		if(startPage < pageBlock) {
			sb.append("<li class='disabled'><a href='#' aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a></li>");
		} else {
			sb.append("<li class=''><a href='list.bbs?pageNum=");
			sb.append(startPage - pageBlock);
			sb.append("' aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a></li>");
		}
		
		for(int i = startPage; i <= endPage; i++) {
			if(i == pageNum) {
				sb.append("<li class='active'><a href='#'>");
				sb.append(i);
				sb.append("<span class='sr-only'>");
				sb.append(i);
				sb.append("</span></a></li>");
			} else {
				sb.append("<li class=''><a href='list.bbs?pageNum=");
				sb.append(i);
				sb.append("'>");
				sb.append(i);
				sb.append("<span class='sr-only'>");
				sb.append(i);
				sb.append("</span></a></li>");
			}
		}
		
		if(endPage < totalPage) {
			sb.append("<li class=''><a href='list.bbs?pageNum=");
			sb.append(startPage + pageBlock);
			sb.append("' aria-label='Next'><span aria-hidden='true'>&raquo;</span></a></li>");
		} else {
			sb.append("<li class='disabled'><a href='#' aria-label='Next'><span aria-hidden='true'>&raquo;</span></a></li>");
		}
	}
	
	public StringBuffer getSb() {
		return sb;
	}

	public int getStartRow() {
		return startRow;
	}

	public int getEndRow() {
		return endRow;
	}
}

  부트스트랩을 적용한 화면이다. 이전보다 훨씬 깔끔해졌다. 원래 CSS 적용이나 작성이 생각해야할 부분도 많고, 속성도 익숙하지 않아 별로 안 좋아했는데, 한 번 깔끔하게 만들어보니 계속 바꿔보고 싶은 욕심이 생긴다.

  다른 컴포넌트들도 부트스트랩 공식 사이트에서 확인하고 원하는 것을 원하는 대로 변경할 수 있도록 공부해보자.