페이징은 어렵지만 그렇게 어려운 부분도 아니다. 다만 사칙연산으로 페이징을 구현하고 태그를 만들어 붙이는 것이 귀찮을 뿐이다. 그렇지만 하나 만들어 놓으면 두고두고 써먹을 쓰 있다. 이번에 그것의 마지막이다. 스크립트로도 얼마든지 구현이 가능하고 서버에서 처리하여 메모리 낭비하는 일이 없도록 하는 것이 좋다.
자바스크립트 페이징 구현
이전까지는 대충 구현하는 것까지 해 봤다.
이번에는 이전 버튼과 다음 버튼에 대한 조건처리를 위해 코드를 많이 수정하였다.
처음, 이전, 다음, 마지막 버튼을 클릭하면 페이징번호 또한 재구성을 해 주어야 하며, 이전 버튼을 클릭했을 때 -인 음수값이 나오지 않도록 조건을 주고 다음 버튼을 클릭했을 때 전체페이지 번호를 넘어가지 않도록 보강한 것이다.
이런 처리를 하기 위해 페이지번호를 다시 그려주는 작업이 필요할 수 있다.
이전에 작성한 것부터 다시 파악해보자
▶ 게시판 페이지 자바스크립트 구현 하기 mysql 5.x 사용
▶ 게시판 페이지 구조의 이해 처음 이전 페이지 다음 마지막 mysql 5.x 사용
첫번째는 기능구현에 대한 간단한 설명을 작성했었다.
두번째는 기능구현을 자바스크립트로 구현했지만 최소 페이지번호와 최대 페이지번호를 넘어가는 오류가 있다.
이번엔 이런 오류를 방지하기 위해 자바스크립트로 페이지를 다시 그려주도록 한다.
코드샘플
이전코드와 거의 차이는 없지만 조건처리하는 부분이 조금 다르다.
페이지번호를 그려주기 위해 먼저 계산 가능한 모든 수를 계산해주고 마지막에 태그를 그려준 후 페이징부분에 붙여주었을 뿐이다.
switch 부분이 거슬리긴 하지만, 나중에 보강하도록 한다.
물론, 이 코드 또한 거슬리는 부분이 있고, 매끄럽지 못한 것은 사실이다.
콤포넌트적으로 만들고 싶었지만 나중으로 미루도록 한다.
<!-- html5 기본템플릿 -->
<!DOCTYPE html>
<!-- head -->
<head>
<!-- meta SEO 컨텐츠 -->
<meta name="title" content="제목">
<meta name="description" content="내용">
<meta name="keywords" content="키워드">
<meta name="author" content="작성자">
<meta name="copyright" content="저작권">
<!-- // -->
<!-- meta 반응형 웹표준 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- // -->
<!-- 스타일 -->
<style></style>
<!-- // -->
</head>
<!-- // -->
<!-- body -->
<body>
<div>
<p>전체게시물 : 35개</p>
<p>현재페이지 : <span id="PgnoCurr">1</span>/<span id="PgnoTot">1</span></p>
</div>
<div id="paging">
</div>
</body>
<!-- // -->
<!-- 자바스크립트 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- // -->
<script type="text/javascript">
var vTotalCountItem = 35;
var vPageListPerScreen = 3;
var vPageViewPerScreen = 5;
var vTotalPageCount = parseInt(((vTotalCountItem-1)/vPageListPerScreen)+1);
$(window).on('load', function() {});
$(document).ready( function() {
$('#PgnoTot').text(vTotalPageCount);
fnMakePaging("sta");
});
var fnMakePaging = function(type) {
$('#PgnoCurr').text($('#'+type).attr('pgno'));
switch(type){
case "sta":
var vPgnoSel = 1;
break;
case "prv":
var vPgnoSel = parseInt($('#'+type).attr('pgno'));
break;
case "nxt":
var vPgnoSel = parseInt($('#'+type).attr('pgno'));
break;
case "end":
var vPgnoSel = (parseInt(vTotalPageCount/vPageViewPerScreen)*vPageViewPerScreen)+1;
break;
default:
return;
}
var vPgStd = 1;
var vPgPrv = parseInt(vPgnoSel)-vPageViewPerScreen;
var vPgNxt = parseInt(vPgnoSel)+vPageViewPerScreen;
var vPgEnd = vTotalPageCount;
if(vPgPrv<=1) { vPgPrv=1; }
if(vPgNxt>=vPgEnd) { vPgNxt=vPgnoSel; }
var vTag = "";
vTag += "<a href=\"javascript:void(0);\" id=\"sta\" onclick=\"return fnMakePaging('sta');\" pgno=\"" + (vPgStd) + "\">처음</a>&";
vTag += "<a href=\"javascript:void(0);\" id=\"prv\" onclick=\"return fnMakePaging('prv');\" pgno=\"" + (vPgPrv) + "\">이전</a>&";
for(var lpno = 1; lpno<=vPageViewPerScreen; lpno++) {
if( vPgnoSel <= vTotalPageCount ) {
vTag += "<a href=\"javascript:void(0);\" id=\"pg" + lpno + "\" onclick=\"return fnMakePaging('pg" + lpno + "');\" pgno=\"" + (vPgnoSel) + "\">" + (vPgnoSel++) + "</a>&";
}
}
vTag += "<a href=\"javascript:void(0);\" id=\"nxt\" onclick=\"return fnMakePaging('nxt');\" pgno=\"" + (vPgNxt) + "\">다음</a>&";
vTag += "<a href=\"javascript:void(0);\" id=\"end\" onclick=\"return fnMakePaging('end');\" pgno=\"" + (vPgEnd) + "\">마지막</a>&";
$('#paging').empty();
$('#paging').append(vTag);
};
</script>
</html>결과화면을 보면 이전버튼을 아무리 눌러도 음수값이 나오지 않으며 다음버튼을 눌러도 전체페이지 수를 넘어가지 않는다.
본 기능이 업데이트될 때 그 때 다시 포스팅하기로 하고 기능은 어느정도 나왔으니 여기서 종류한다.
만약, 이것을 참고하는 분들이 계시다면 입맛에 맞게 다음어 사용하면 웹이든 앱이든 어차피 로직은 같으니 써먹을 곳이 두루두루 있을 것이다.
'programming > DataManage' 카테고리의 다른 글
| 비트연산자 and 비교되는 비트가 둘 다 1이면 1 (0) | 2021.08.30 |
|---|---|
| 게시판 페이징 mysql 5.x limit 를 이용한 게시물 나눠서 가져오기 (0) | 2021.08.07 |
| 게시판 페이지 자바스크립트 구현 하기 mysql 5.x 사용 (0) | 2021.08.03 |
| 게시판 페이지 구조의 이해 처음 이전 페이지 다음 마지막 mysql 5.x 사용 (0) | 2021.08.02 |
| 게시판 페이징 쿼리 만들기 테이블 만들기 mysql 5.x 사용 (0) | 2021.08.01 |
댓글