타닥타닥 개발자의 일상

오픈 소스 pagination 이용하여 웹페이지 페이징하기 / 페이지 나누기 / javascript 본문

코딩 기록/JavaScript

오픈 소스 pagination 이용하여 웹페이지 페이징하기 / 페이지 나누기 / javascript

NomadHaven 2022. 2. 25. 13:52

게시판에 글이 많이 늘어나면 한 페이지 안에서 많은 글을 보기 불편하다.

그래서 한 페이지당 글을 10개/20개 식으로 볼수 있도록 페이지를 나누곤 한다.

페이지당 볼수 있는 게시물을 나누는 행위를 페이징이라고 한다.

 

https://github.com/josecebe/twbs-pagination

 

GitHub - josecebe/twbs-pagination: jQuery pagination plugin (bootstrap powered)

jQuery pagination plugin (bootstrap powered). Contribute to josecebe/twbs-pagination development by creating an account on GitHub.

github.com

상기의 깃허브를 들어가면 이러한 페이징을 쉽게 할수있는 플러그인 pagination을 다운받을 수 있다.

Code> Downdload ZIP을 통해서 파일을 다운 받자.

 

 

파일을 다운받고 압축을 풀면 폴더에 저장된 아래의 파일들이 보인다.

examples을 통해서 페이징이 실현된 모습을 볼수있다.

페이징에 필요한 플러그인은 jquery.twbsPagination.min.js 이다.

min이 붙지 않은 jquery.twbsPagination.js 을 사용해도 되지만,

기능상 차이는 없으므로  jquery.twbsPagination.min.js를 사용할 것이다.

 

jquery.twbsPagination.min.js를 복사한다.

 

그리고 복사한 플러그인을 적용할 웹 페이지를 적용할 프로젝트를 만들자.

 

이클립스에서 File > New > Dynamic Web Project로 프로젝트를 생성한다.

파일제목은 원하는 대로 붙이면 된다. 난 pagination이라는 이름을 썼다.

 

복사한 플러그인을 WebContent 파일에 붙여넣기한다.

그리고 플러그인을 적용할 페이지인 index.html 파일을 만든다.

 

index.html 파일에 적용할 자바스크립트 코드는 다운 받은 파일의 example 파일에서 확인할수 있다.

examples 폴더 클릭
index파일 메모장 형식으로 열기

exampels 폴더 안에 있는 index.html 파일을 메모장 형식으로 열어보면

아래와 같은 코드가 나온다.

 

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Pagination plugin</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
    <script src="../jquery.twbsPagination.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
    <nav aria-label="Page navigation">
        <ul class="pagination" id="pagination"></ul>
    </nav>
</div>
<script type="text/javascript">
    $(function () {
        window.pagObj = $('#pagination').twbsPagination({
            totalPages: 35,
            visiblePages: 10,
            onPageClick: function (event, page) {
                console.info(page + ' (from options)');
            }
        }).on('page', function (event, page) {
            console.info(page + ' (from event listening)');
        });
    });
</script>
</body>
</html>

위의 코드를 자신이 만들 페이지에 맞게 조금 변형시켜보려고 한다.

 

Dynamic Web Project에서 생성한 index.html 파일에 변형한 코드를 적용시켰다.

index.html(Dynamic Web Project)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

//제이쿼리 적용 코드
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script type="text/javascript" src="./jquery.twbsPagination.min.js"></script>
</head>
<body>

<div class="container">
    <nav aria-label="Page navigation">
        <ul class="pagination" id="pagination"></ul>
    </nav>
</div>

<script>
let totalCount = 23; //글의 총수
let pageSize =10;
let pageNumber = 1; // 현재 페이지

let _totalPages = totalCount / 10

// 10  만약 글이 23개 있다면 10개로 나눠서 페이지당 글 구성이 10개 10개 3개가 된다는 말.
if(totalCount % 10 > 0){
	_totalPages++;
}

$('#pagination').twbsPagination({ 
	startPage:1,
	totalPages: _totalPages,
    //페이지당 보이는 글의수는 10개
    visiblePages: 10,
    
    //" « "라는 문자열로 최신글 방향을 표시
    first:'<span sris-hidden="true">«</span>' ,
    
    //" » "라는 문자열로 마지막글 방향을 표시
    last:'<span sris-hidden="true">»</span>' ,
    
    prev:"이전",
    next:"다음",
    onPageClick: function (event, page) {
    
    //확인을 위해 클릭한 페이지의 번호를 알림창으로 출력	
        alert(page); 
            }
     })
</script>	
</body>
</html>

 

해당 index.html 파일을 실행시키면 

제일 처음 페이지의 번호를 알리는 알림창이 나오고

이런식으로 페이징된 화면이 나온다.

페이지 2번을 클릭하면 알림창으로도 2가 출력된다.

 

 

그렇다면 실제로 글이있는 게시판에 pagination을 적용해보자.

나는 현재 작업중인 프로젝트의 게시판 목록에 pagination을 적용했다.

 

코드는 아래와 같다.

bbslist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bbslist</title>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="./css/initial.css">
<link rel="stylesheet" type="text/css" href="./css/table.css">
<link rel="stylesheet" type="text/css" href="./css/button.css">

<script type="text/javascript"
	src="./jquery/jquery.twbsPagination.min.js"></script>
</head>
<body>
<br>
<br>
<div id="app" class="container">	
	<table style="margin-left: auto; margin-right: auto; margin-top: 3px; margin-bottom: 3px">
		<tr>
				<td style="padding-left: 5px"><select class="custom-select"
					id="_choice" name="choice">
						<option selected>선택</option>
						<option value="title">제목</option>
						<option value="content">내용</option>
						<option value="writer">작성자</option>
				</select></td>
				
				<td style="padding-left: 5px" class="align-middle">
				<input type="text" class="form-control" id="_search" name="search" placeholder="검색어"></td>
				
				<td style="padding-left: 5px">
					<span><button type="button" class="btn btn-primary" id="btnSearch">검색</button></span>
				</td>
		</tr>
	</table>	
	<br>

	<table class="table table-striped table-hover">
		<thead>
			<tr>
				<th>번호</th>
				<th>제목</th>
				<th>작성자</th>
				<th>seq</th>
			</tr>
		</thead>

		<tbody id="tbody">
		</tbody>

	</table>
	<br><br>

	<div class="container">
		<nav aria-label="Page navigation">
			<ul class="pagination" id="pagination"
				style="justify-content: center"></ul>
		</nav>
	</div>
	<br><br>

	<div align="center">
		<!-- <a href="bbswrite.html">글쓰기</a> -->
		<button type="button" id="writeBtn" class="btn btn-primary">글쓰기</button>
	</div>
	<br><br>

</div>

<script type="text/javascript">
$(document).ready(function () {
	let str = sessionStorage.getItem("login");	
	let json = JSON.parse(str);	
	
	getBbslist( 0 );
	getBbsCount();
	
	$("#btnSearch").click(function () {
		getBbslist( 0 );
		getBbsCount();		
	});
	 
	 $("#writeBtn").click(function () {
		location.href = "bbswrite.html";
	});
	
})

function getBbslist( page ) { //페이지는 도대체 어디서 나오는거? 사용할때마다 0이란 값을 page를 대신해서 넣어주긴 함. 이게 무슨의미?
	let choice = $("#_choice").val();
	let search = $("#_search").val();
	
	$("#tbody").html(""); // 테이블 초기화
	$.ajax({
		url:"http://localhost:3000/getBbsListSearchPage",
		type:"get",
		data:{ "choice":choice, "search":search, "page":page },
		success:function(list){
			
			$.each(list, function (i, item) {
				
				let str = "<tr>"
							+ "<th>" + (i + 1) + "</th>";
				
				if(item.del == 0){
					str +=	  "<td>" + getArrow(item.depth) + "&nbsp;&nbsp;<a href='bbsdetail.html?seq=" + item.seq + "'>" + item.title + "</a></td>"
				}
				else{
					str +=	  "<td align='center'><font color='#ff0000'>- 이 글은 작성자에 의해서 삭제되었습니다 -</font></td>"
				}
				
					str +=	  "<td>" + item.id + "</td>"
							+ "<td>" + item.seq + "</td>"
						+ "</tr>";	
						
				$("#tbody").append(str);
			});
		},
		error:function(){
			alert('error');	
		}			
	});
}

// 글의 총수를 취득
function getBbsCount() {
	let choice = $("#_choice").val();
	let search = $("#_search").val();
	
	$.ajax({
		url:"http://localhost:3000/getBbsCount",
		type:"get",
		data:{ "choice":choice, "search":search, "page":0 }, //왜 page를 0이라 설정?
		success:function(count){ //count가 어디서 나오는데? controller에 있는 getBbsCount함수 실행해서 나온 값?
			//alert(count);
			loadPage(count); 
		},
		error:function(){
			alert('getBbsCount error');
		}		
	});	
}

function loadPage( totalCount ) { // 글의 총수		 
	let pageSize = 10;		
	
	let _totalPages = totalCount / 10    // 10 10 3
	if(totalCount % 10 > 0){
		_totalPages++;
	}
	
	$('#pagination').twbsPagination('destroy');	// 페이지 갱신
	
	$('#pagination').twbsPagination({		
	    totalPages: _totalPages,
	    visiblePages: 10,
	    first:'<span sris-hidden="true">«</span>',
	    last:'<span sris-hidden="true">»</span>',
	    prev:"이전",
	    next:"다음",
	    initiateStartPageClick:false,	// onPageClick 자동호출 방지
	    onPageClick: function (event, page) {
	        // alert(page);
	        getBbslist( page - 1 );
	    }
	})
}

function getArrow( depth ) {
	let rs = "<img src='./image/arrow.png' width='20px' height='20'/>";
	let nbsp = "&nbsp;&nbsp;&nbsp;&nbsp;";
	
	let ts = "";
	for(i = 0;i < depth; i++){		// __ >>
		ts += nbsp;
	}
	return depth==0?"":ts + rs;
}


</script>

</body>
</html>

 

위의 코드를 실행하면 아래와 같은 페이지가 나온다.

 

해당 게시판에 특정한 키워드로 검색을 하면,

검색된 결과만큼 페이지 수가 줄어드는것도 확인 가능하다.

 

'코딩 기록 > JavaScript' 카테고리의 다른 글

배열을 받고 형식을 갖춘 문자로 출력하기 javascript JS  (0) 2022.12.06
자바스크립트 함수/배열 이용해서 배열에 원하는 값 저장하기 array  (0) 2022.11.16
자바 스크립트 if 조건문으로 함수 만들어서 원하는 결과 출력하기  (0) 2022.11.16
JavaScript 기초 - 변수와 데이터 타입 : let / const / number / string/ boolean / null / undefine / symbol  (0) 2022.08.11
CGV 웹사이트 크롤링해서 HighChart 이용한 예매율 순위표 만들기 / j soup 이용  (0) 2022.02.25
'코딩 기록/JavaScript' Related Articles more
Comments