페이징을 위해 기능구현하는 것은 의외로 쉽지 않다. 게시판 페이징은 여러모로 요긴하다 여러 자료를 잘라서 보기 위함도 있고 데이터베이스의 처리속도에도 영향이 있다. 플랫폼이나 컴포넌트는 쿼리는 신경쓰지 않고 백엔드 코드에서 다뤄지는 경우들이 더 많기도 하다. 사실 이미 만들어진 플랫폼을 뜯어보는 것이 가장 좋다.
페이징 구현하기
웹을 기준으로 하기 때문에 기능적인 것은 자바스크립트를 이용하도록 한다.
자바스크립트는 웹페이지에서 동작구현에 사용된다.
그렇기에 페이징도 자바스크립트로 구현하도록 한다.
서버에서 주요한 값만 있고 나머지는 자바스크립트로 구현한다면 웹페이지 속도는 크게 향상된다.
페이징에 대한 간단한 개요를 보도록 하자.
페이징에 필요한 것은 5가지가 있다.
처음 | 이전 | 페이지 숫자 | 다음 | 마지막
▶ 게시판 페이지 구조의 이해 처음 이전 페이지 다음 마지막 mysql 5.x 사용
코드구현하기
기능은 단순하다.
처음은 가장 맨 처음을 나타내기 때문에 항상 1페이지 이다.
이전은 현재 선택한 페이지에 대해 이전 페이지를 보여준다.
만약 현재 보여지는 페이지들이 6 7 8 9 10 이라면 이전 버튼을 클릭시 1 2 3 4 5 를 보여주는 식이다.
다음은 현재 선택한 페이지에 대해 다음 페이지를 보여준다.
만약 현재 보여지는 페이지들이 6 7 8 9 10 이라면 다음 버튼을 클릭시 11 12 13 14 15 를 보여주는 식이다.
마지막은 가장 마지막 페이지를 보여주며
나열된 페이지번호들을 마지막 페이지가 속한 부분까지 보여준다.
만약 현재 보여지는 페이지번호들이 6 7 8 9 10 이고 맨 마지막 페이지가 12 라고 할 때 마지막을 클릭하면 11 12 페이지번호를 보여준다.
<!-- 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>
<a href="javascript:void(0);" id="sta" onclick="return fnGetList('sta');" pgno="">처음</a>
<a href="javascript:void(0);" id="prv" onclick="return fnGetList('prv');" pgno="">이전</a>
<a href="javascript:void(0);" id="pg1" onclick="return fnGetList('pg1');" pgno="">1</a>
<a href="javascript:void(0);" id="pg2" onclick="return fnGetList('pg2');" pgno="">2</a>
<a href="javascript:void(0);" id="pg3" onclick="return fnGetList('pg3');" pgno="">3</a>
<a href="javascript:void(0);" id="pg4" onclick="return fnGetList('pg4');" pgno="">4</a>
<a href="javascript:void(0);" id="pg5" onclick="return fnGetList('pg5');" pgno="">5</a>
<a href="javascript:void(0);" id="nxt" onclick="return fnGetList('nxt');" pgno="">다음</a>
<a href="javascript:void(0);" id="end" onclick="return fnGetList('end');" pgno="">마지막</a>
</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);
$('#sta').attr('pgno', "1");
$('#prv').attr('pgno', "1");
$('#pg1').attr('pgno', "1");
$('#pg2').attr('pgno', "2");
$('#pg3').attr('pgno', "3");
$('#pg4').attr('pgno', "4");
$('#pg5').attr('pgno', "5");
$('#nxt').attr('pgno', "6");
$('#end').attr('pgno', vTotalPageCount);
});
var fnGetList = 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;
}
$('#prv').attr('pgno', parseInt(vPgnoSel)-vPageViewPerScreen);
$('#nxt').attr('pgno', parseInt(vPgnoSel)+vPageViewPerScreen);
for(var lpno = 1; lpno<=vPageViewPerScreen; lpno++){
$('#pg'+lpno).html(vPgnoSel);
$('#pg'+lpno).attr('pgno', vPgnoSel++);
}
};
</script>
</html>결과화면을 보자.
정상적으로 동작한다.
물론, 위의 코드를 좀 더 보강해야 한다.
마지막 페이지를 넘어가는 경우 페이지번호가 넘어가지 않도록 해야 하고, 이전 버튼을 클릭했을 경우 - 값이 나오지 않도록 손을 봐줘야 한다.
'programming > DataManage' 카테고리의 다른 글
| 게시판 페이징 mysql 5.x limit 를 이용한 게시물 나눠서 가져오기 (0) | 2021.08.07 |
|---|---|
| 게시판 페이징 범위 조건처리 자바스크립트 구현 (0) | 2021.08.04 |
| 게시판 페이지 구조의 이해 처음 이전 페이지 다음 마지막 mysql 5.x 사용 (0) | 2021.08.02 |
| 게시판 페이징 쿼리 만들기 테이블 만들기 mysql 5.x 사용 (0) | 2021.08.01 |
| MySQL 테이블 수정 컬럼 추가 쿼리 만들기 ALTER TABLE ADD (0) | 2021.04.18 |
댓글