Jquery 페이지네이션 구현하기 (제이쿼리 페이징)

네 그렇게 하기 싫었던 제이쿼리를 하게되었습니다.

정말 제이쿼리 직관적이긴 한데 너무 무겁고 옛날 스타일이고… 아무튼 제이쿼리 페이지네이션을 맡게 되어서 정리할 겸 올립니다.

일단 페이지네이션을 여러페이지에서 사용할 거라 함수로 만들었고, 프로젝트 구조에 맞춰 append 하기 때문에 주석처리 해놓은 부분은 자신의 프로젝트 구조에 맞춰 바꾸면 됩니다.

페이지네이션 코드

(param: append할 tableId, 전체데이터 수, 테이블에 나타낼 데이터 수, 화면에 나타날 페이지 수, 현재 페이지, 페이지바꾸고 호출할 함수)

// 페이지네이션
function renderPagination(tableId, totalCnt, perPage, pageSize, current, changePage) {

	let $pagingHtml = $('#' + tableId).parent(); //append시킬 부모 요소


	if ($($pagingHtml).find('.pagination').length > 0) {
		$('.pagination').remove();
	}
	
	const pageCount = parseInt((totalCnt- 1) / perPage+ 1);// 전체 페이지 수
	const pageBlock = parseInt(pageCount / pageSize);// 생성될 페이지 블록 수

	let pages = [];
	let curBlockNum = parseInt((current- 1) / pageSize);

	if (totalCnt> 0) {
		let start = curBlockNum * pageSize;
		let end = pageCount >= start + pageSize- 1 ? start + pageSize- 1 : pageCount - 1;
		for (let i = start; i <= end; i++) {
			pages.push(i);
		}
	}

	let html = '<div class="pagination">';

	if (current!== 1) {
		html += '<a href="#" id="first">처음</a>';
		html += '<a href="#" id="prev">이전글</a>';
	}

	if (pages.length > 0) {
		for (let i = 0; i < pages.length; i++) {
			html += "<a href='#' id=" + (pages[i] + 1) + ">" + (pages[i] + 1) + "</a>";
		}
	}

	if (pageCount > 1 && current!== pageCount) {
		html += '<a href=# id="next">다음글</a>';
		html += '<a href=# id="last">마지막</a>';
	}

	html += '</div>';
	$($pagingHtml).append(html);

	$(".pagination a").css("color", "black");
	$(".pagination a#" + current).css({ "text-decoration": "none", "font-weight": "bold" }); 


	$(".pagination a").on("click", function() {

		let $item = $(this);
		let $id = $item.attr("id");
		let selected= $item.text();

		if ($id === "next") selected= Number(current) + 1;
		else if ($id === "prev") selected= Number(current) - 1;
		else if ($id === "last") selected= Number(pageCount);
		else if ($id === "first") selected= 1;
		else selected= Number(selected);

		if (selected=== current) return;

		changePage(selected);
		renderPagination(tableId, totalCnt, perPage, pageSize, selected, changePage);
	});
}

페이지네이션 호출 부분

• 저는 dataTable라이브러리를 사용 중이라 table이 다 그려지고 나서 호출합니다. 각자의 부분에 맞춰서 하면 됩니다. onChange 함수도 구현해서 같이 넘겨줍니다.

//...table 초기화 된 후에 호출
initComplete: function() {
	// totalCnt, perPage, pageSize, curPage, changePage()
	renderPagination("listFaq", totalCnt, 10, 10, curPage, changePage);
}

//...table

// change page => api 재호출
function changePage(item) {
        //curPage는 js 상단에 1로 초기화, 선언 되어 있음
	if (item === curPage) return;
	curPage = item;
	getFaqList();
}