Bootstrap pagination 자바스크립트로 구현하기

---

Chatscript 챗봇 구축을 해보는 중에, 모든 대화가 log.txt로 남겨지는걸 확인했다.

로그데이터로 대화의 패턴이라던지, 사용자 정보를 뽑을 수 있겠단 생각과, 더욱이 관리자 페이지를 시범삼아 대충 한번 만들어 보자 라는 생각에 먼저 로그데이터 리스트를 만드는중 닥친 페이지네이션.

흔히 게시판 구축에 필수 조건인데, 유독 나는 페이지네이션이 어려웠다.

그래서 대충 남의 소스가져다가 사용해버리곤 했는데, 요번에는 그럴수 없다는 생각에 열심히 검색하고 알아보던중, 도움이 많이 된 사이트를 링크해둔다.

https://okky.kr/article/282819

더욱이 서버에서 페이지네이션을 처리하는게 아니라, 나는 front에서 구현하고 싶어서 자바스크립트로 검색해보는중,

부트스트랩 css에 자바스크립트로 페이지네이션을 구현하는 좋은 오픈소스 발견!!!!!!!!!!!!!

완전 유레카였다..ㅜ_ㅜ

http://esimakin.github.io/twbs-pagination/

따라서 구현하기도 너무나도 쉽고 편리하게 설계된 오픈소스... 기본 페이지네이션에 대한 이해가 있다면 쓰는데 별 무리가 없다. 쉽다.

이렇게 좋은건 나눠써야 해..널리널리...

위의 오픈소스를 사용해서 구현한 페이지네이션

보기에는 별거 없어보이지만 코드를 보면 아주 아주 쉽다.

$('#pagination').twbsPagination({
   totalPages: totalPages,  // 전체 page블럭 수
   visiblePages: visibleBlock,  // 출력될 page 블럭수 상수로 지정해 줘도 되고, 변수로 지정해줘도 된다.
   prev: "이전",
   next: "다음",
   first: '«',
   last: '»',
   onPageClick: function (event, page) {
   $('#page-content').text('Page ' + page);
   paging(page);
   }
});

데모사이트에서 사용했던 예제와 똑같은데,

페이지네이션을 붙여줄 html 태그의 아이디 값에 twbsPagination을 걸어준다

(아, 그전에 먼저 다운로드로 자바스크립트 붙여주는거 잊지말자)

대충 설명하자면, totalPages는 페이지네이션의 전체페이지 블럭수, visiblePages는 출력할 page블럭의 갯수를 지정해준다. prev, next, first, last는 이전 다음, 맨처음 맨 마지막을 향하게 하는 옵션을 지정할 수 있다. value값이나, css를 지정할 수 있다. 실질적으로 onPageClick에서 한페이지당 보여줄 테이블 리스트를 그려주면 된다. 파라미터로 page를 가져간다.

나는 paging(page)라는 함수를 만들었는데,

function paging(page) {
	$('#list-body').empty();
	var startRow = (page - 1) * pageSize; // + 1 list는 0부터 시작하니깐;
	var endRow = page * pageSize;
	if (endRow > totalCount) 
	{
		endRow = totalCount;
	}  
	var startPage = ((page - 1)/visibleBlock) * visibleBlock + 1;
	var endPage = startPage + visibleBlock - 1;
	if(endPage > totalPages) {    //
	  endPage = totalPages;
	}
	for (var j = startRow; j < endRow; j++) 
	{	
		$('#list-body').append(''+ chatLogList[j].fileNo +''
				+ textLengthOverCut(chatLogList[j].fileName, '25', '...') +''+ chatLogList[j].fileDate +'');
	}
}

startRow는 페이지에 출력할 게시물의 첫번째, endRow는 마지막이다.

나는 arraylist로 게시물의 리스트를 받아오는데, length는 0부터 시작이기 때문에 startRow를 0으로 잡아줬다.

startPage와 endPage를 잡기 위해서는 totalpage를 받아오는데 totalPage는 totalCount/pageSize이다.

totalPages = totalCount/pageSize;
if (totalCount%pageSize > 0) {
totalPages++;
}

totalCount는 게시물의 총 갯수, pageSize는 한 페이지당 보여줄 게시물의 갯수로 나눠주는데, 나머지가 생길 경우는 페이지를 하나 더 더해준다. 그리고 for문을 돌면서 게시물을 테이블을 자유롭게 그려주면 된다. 나는 chatLogList에서 번호와 파일명, 수정날짜를 그려줬다.

이렇게 그려주는 함수를 지정하고 호출하면 완성이다. 

back에서 처리하는게 아니라 front에서 처리해준다면 이 오픈소스를 적극 추천한다ㅜ.ㅜ

너무너무너무 편리하다.