[TIL] 내일배움캠프 1.6

이번 프로젝트에서 페이지네이션을 구현하기 위해 Pagination.js 라이브러리를 사용하였다.

공식 홈페이지
https://pagination.js.org/

참고 블로그
https://junho85.pe.kr/1440

Pagination.js는 jQuery 플러그인으로 구현되어있고 리스트 형식의 데이터의 페이징을 쉽게 할 수 있도록 도와준다.

이전 미니프로젝트에서는 서버단에서 offset을 이용하여 동적으로 페이지네이션을 생성하였고,

이번에는 클라이언트에서 처리하는 방법을 생각해보고 라이브러리를 사용하게 되었다.

클라이언트에서 페이지네이션을 처리하면 단점이 있다.

서버에서 페이지네이션을 하면 화면에 표시할 데이터의 수 만큼 DB에서 불러오고, 페이지 번호에 따라 잘라서 클라이언트에게 전달 하면 되는 반면에,

클라이언트에서 페이지네이션을 하면 일단 모든 데이터를 서버에서 전달해야 하므로 부하가 심하다.

그래도 페이지네이션에 대한 좋은 라이브러리들이 많이 나와있다고 하여 사용해보았다.

let container = $('#pagination');	// 페이지네이션 막대를 보여줄 영역

// pagination.js method 사용
container.pagination({
	dataSource: datalist,
  	pageSize: 5,
  	callback: function (data, pagination) {
    	let dataHtml = '';
      	$.each(data, function(index, item) {
        	dataHtml += `
				...
			`;
        };
        $('#data-container').html(dataHtml);
    }
});

• dataSource : DB에서 가져온 데이터 리스트
• pageSize : 한 페이지에 띄워줄 데이터 수
• callback
  - data : dataSource 에서 페이징 하고 난 데이터