페이지네이션

• MS-SQL을 이용하여 페이징 쿼리 구현은 검색을 통해 쉽게 가능하지만, 실제 가지고 있는 데이터를 ajax를 통해 가져와서 브라우저에 나타내고 페이지네이션을 구현하는 것은 상당히 까다로운 작업이다. 그러나 매우 빈번히 사용되는 기능이기 때문에 멘토님이 보여주신 내용을 기억나는 대로 따라가 보았다.
• 검색어 : jquery pagination

1. 여기에서 zip파일 다운로드 후 book_detail.html에 코드 붙여넣기

<script type="text/javascript" src="js/flaviusmatis-simplePagination.js-da97104/jquery.simplePagination.js"></script>

<link type="text/css" rel="stylesheet" href="js/flaviusmatis-simplePagination.js-da97104/simplePagination.css"/>

2. 테이블 밑에 단순 페이지네이션 클래스 생성하고 $.ajax의 success 함수에 여기에서 제공한 기본 값 넣기.

<!-- 페이징 -->

<div class="pagination pagination_mr">
</div>

<script>
// $(function() { 함수 안에 들어가니까 함수 선언부는 생략. 
    $(selector).pagination({
        items: 100, // 전체 데이터의 개수 
        itemsOnPage: 10, // 한 페이지에 나타낼 아이템의 수 
        cssStyle: 'light-theme' // 사전에 정의된 css 스타일
    });
// });
</script>

3. 렌더링 이후 css 수정

<style>
	/* (s) pagination 스타일 수정 */
	.light-theme a, .light-theme span {
		float:none;
		display: inline-block;
	}
	
	.simple-pagination li {
		float: none;
		display: inline-block;
	}

	.simple-pagination ul {
		padding: 20px 0;
	}
	/* (e) pagination 스타일 수정 */
</style>

4. 프로시저 수정(기존 단순 조회 내용에서 페이징 쿼리 추가)

/* 수정 전 데이터*/
CREATE PROCEDURE [dbo].[sp_mr_select_byAdmin]
	
	@vi_BookIdx bigint
	
AS
BEGIN

	SET TRANSACTION ISOLATION LEVEL READ UNCOMMITTED;
	-- SET NOCOUNT ON added to prevent extra result sets from
	-- interfering with SELECT statements.
	SET NOCOUNT ON;

	
			select
				BookIdx
				,MRIdx
				,MRWriter
				,MRTitle
				,Convert(varchar(19), MRWriteDatetime, 121) as 'MRWriteDatetime'


			from MR
			
			where BookIdx = @vi_BookIdx
			order by MRIdx desc
				
END

/* 수정 후 데이터*/
CREATE PROCEDURE [dbo].[sp_mr_select_byAdmin]
	
	@vi_BookIdx bigint,
	@vi_pageNo int,
	@vi_pageSize int = 10
	
AS
BEGIN

	SET TRANSACTION ISOLATION LEVEL READ UNCOMMITTED;
	-- SET NOCOUNT ON added to prevent extra result sets from
	-- interfering with SELECT statements.
	SET NOCOUNT ON;

	DECLARE @total_count INT;
	SELECT @total_count = COUNT(*) 
	FROM  MR WITH (NOLOCK)
	WHERE BookIdx = @vi_BookIdx;
	
	select
		BookIdx
		,MRIdx
		,MRWriter
		,MRTitle
		,Convert(varchar(19), MRWriteDatetime, 121) as 'MRWriteDatetime'
		,@total_count AS totalCnt
	from MR WITH (NOLOCK)
	where BookIdx = @vi_BookIdx
	order by MRIdx desc
	OFFSET (@vi_pageNo - 1) * @vi_pageSize ROWS
	FETCH NEXT @vi_pageSize ROWS ONLY
				
END

• 변동 사항
  1. OFFSET + FETCH를 활용한 페이징 쿼리 추가
  2. 총 페이지 수 확인을 위한 total count 추가
  3. 번외) with (NOLOCK) 기능에 대하여.

5. server.js 에서 API 수정하기.

app.get('/api/getMR', async function(req,res){
    try {
        const pool = await poolPromise;
        let result = await pool.request()
            .input('vi_BookIdx', req.query.book_idx)
            .input('vi_pageNo', req.query.page_no) //<- 추가1
            .input('vi_pageSize', req.query.page_size) //<- 추가2
            .execute('[sp_mr_select_byAdmin]')
        res.json(result);
    } catch(err) {
        res.status(500);
        res.send(err);
    }
});

6. 템플릿은 외부로 빼서 정의하기.

<template id="tbody_template" style="display:none";>
	<tr>
		<td>
			<span class="td_span_no">{no}</span>
		</td>
		<td>{name}</td>
		<td class="td_title">
			<span id="{id}">{title}</span>
		</td>
		<td>{date}</td>
	</tr>
</template>

<table></table>

7. getMR 을 함수()로 만들기, 원래 getMR ajax 있던 자리에 대신 getMR() 함수 실행하기. 초기 mrPageNo는 1로 설정하기.

var mrPageNo = 1;

8. params에 book_idx외에 다른 변수들(page_no, page_size)까지 정의하기.

9. 페이지 네이션 실행시, if 절 추가하기.

if(result.recordset.length > 0 && $(".pagination_mr").html().trim() == "") 
{
	 $(".pagination_mr").pagination({
		items: result.recordset[0].totalCnt,
		itemsOnPage: params.page_size,
		cssStyle: 'light-theme',
	});
}

• 즉, pagination 메소드를 실행하기 위한 조건은

  	>_1.  DB에서 들어오는 데이터가 있을 때
  	>2. 페이징 개체가 들어올 div가 비어있을 때 _
  
  	를 모두 만족해야한다.

• 위 조건을 만족한다면, 페이지네이션 만들어라!

10. 새로운 데이터 추가할 때, append 말고 html+=, html()로 변경하기

// 기존 : row 하나 생성될때마다 추가하는 형식

for(var i = 0; i < result.recordset.length; i ++){
	var row = result.recordset[i];
	var html = $('#tbody_template').html()
				.replace("{no}",row.MRIdx)
				.replace("{name}",row.MRWriter)
				.replace("{mr_id}",getID())
				.replace("{title}",row.MRTitle)
				.replace("{date}",row.MRWriteDatetime);
	$('.mr_board table').append(html);
}
										   

// 수정 : html += 로 한 줄씩 추가하여 그 전체를 tbody 안에 넣기.

var html = "";
for(var i = 0; i < result.recordset.length; i ++){
	var row = result.recordset[i];
	html += $('#tbody_template').html()
			.replace("{no}",row.MRIdx)
			.replace("{name}",row.MRWriter)
			.replace("{id}",getID())
			.replace("{title}",row.MRTitle)
			.replace("{date}",row.MRWriteDatetime);
}
	$('.mr_board table tbody').html(html);

11. pagination 메소드 내에 ‘페이지 클릭시에 getMR()함수 실행하기. ’기능 추가

onPageClick:function(pageNumber, event){
	mrPageNo = pageNumber;
	getMR();
}

12. 기능 구현시 한줄한줄 직접 디버깅 해보기

• 페이지네이션은 한 번 만들어두면 그대로 복붙해서 쓰면 됨.