Ajax를 이용한 게시글 페이징

Ajax를 이용하여 MySql을 통한 페이징을 구현하였다.

사용법은 간단하다. 우선 첨부된 JS파일을 임포트시키고, 다음과 같이 사용한다.

사전의 몇개의 게시글이 있는지 알아야 한다. 게시글 리스트 페이지 이동 시 게시글 개수를 COUNT 하여 프론트 단으로 보내주자.

function pageMove(pg){
	$.ajax({
		type	: "POST",
		url	    : "",
		data	: {	
			'page'		: pg,
			'perPgLine' 	: perPgLine
		},
			dataType: 'JSON',
		success : function(result) {
			page = pg;
			//update board fromd data
			updatePaging("pageMove", page, allRowCnt, perPgLine, 3);
		},
		error : function(e) {
		console.log(e);
		}
	});
}

Ajax로 page와 perPgLine 을 보내준다.

page는 선택한 페이지를, perPgLine은 페이지당 게시글 개수를 말한다.

<br/>

페이지에 처음 들어온 경우를 고려하여 다음을 입력하자.

$(document).ready(function(){
        pageMove(1);
}

<br/>

<br/>

<br/>

int startRow = (page - 1) * perPgLine;

서버단에서 DB를 조회하기전에, startRow를 위와 같이 계산하여 정의 해준다.

<br/>

SELECT * 
FROM TB_PTFOLIO_BOARDS
WHERE 1 = 1 
ORDER BY BOARD_SORT, BOARD_DATE DESC, BOARD_SEQ DESC
LIMIT #{startRow}, #{perPgLine}

LIMIT을 사용해서, startRow번째 부터 perPgLine개 만큼 데이터를 가져온다.

DB로 부터 조회한 데이터를 잘 다듬어서, 프론트 단으로 다시 보내주자.

<br/>

<br/>

	success : function(result) {
			page = pg;
			//update board fromd data
			updatePaging("pageMove", page, allRowCnt, perPgLine, 3);
		},

3 : 게시글을 다시 그려주자. 알아서 하자.

4 : 페이징을 다시 그려주자.

<br/>

function updatePaging(callFunc, page, allRowCnt, perPgLine, pgGrpCnt){
	var boardPager	= $('.board-pager');
	var	pager		= drawPager(callFunc, page, allRowCnt, perPgLine, pgGrpCnt);
			
	boardPager.empty();
	boardPager.append(pager);
}

2 : 페이징을 담을 곳이다.

3 : drawPager() 함수를 호출하여, 그려진 페이징을 가져오자.

drawPager()
callFunc : 페이지 클릭 시 호출되는 함수이다. 1을 누르면 pagemove(1) 호출.
page  : 현재 페이지
allRowCnt : 전체 게시글 수
perPgLine : 페이지당 게시글 수
pgGrpCnt : 페이징을 몇개씩 묵을 것인가. ex.3인경우  (1,2,3) (4,5,6)

<br/>

<br/>

<br/>

<img alt="" src="https://static.podo-dev.com/blogs/images/2019/07/10/origin/GHBQNE181224235520.PNG" style="border-style:solid; border-width:1px; width:720px">

다음과 같이 완성.

<br/>