AJAX (1) 에서 paging(pageNo)를 실행하며 마지막에 boardPaging 메소드를 호출했었다
$("#boardList").append(html);
boardPaging(resultDatas.total, dataPerPage, pageCount, pageNo);resultDatas.total : 출력될 리스트 총 개수 (count 쿼리로 받아옴)
dataPerPage : 한 페이지에 나타낼 데이터 수 = pageSize와 동일
pageCount : 한 페이지에 나타낼 페이지 수 (리스트 아래에 보여질 페이지 번호의 개수)
pageNo : 현재 페이지 번호
var totalData; // 총 데이터 수
var dataPerPage = 10; // 한 페이지에 나타낼 데이터 수
var pageCount = 5; // 한 화면에 나타낼 페이지 수
function boardPaging(totalData, dataPerPage, pageCount, currentPage){
var totalPage = Math.ceil(totalData/dataPerPage); // 총 페이지 수
var pageGroup = Math.ceil(currentPage/pageCount); // 페이지 그룹
var last = pageGroup * pageCount; // 화면에 보여질 마지막 페이지 번호
if(last > totalPage){
last = totalPage;
}
var first = last - (pageCount-1); // 화면에 보여질 첫번째 페이지 번호
var next = last+1;
var prev = first-1;
if(totalPage < 1){
first = last;
}
var $pingingView = $("#boardPaging");
$pingingView.empty();
var html = "";
if(totalData > 0 && last > 1){
html += '<a href="javascript:;" onclick="paging(1);" id="1" pagenumber="1">처음</a>';
}
if(prev > 0){
html += '<a href="javascript:;" type="button" onclick="paging('+prev+');" id="prev" >이전</a>';
}
for(var i= first ; i <= last; i++){
if(i>0){
if(last == i){
html += ' <a href="javascript:;" onclick="paging('+i+');" id="' + i + '" pagenumber="'+i+'">' + i + '</a>';
}else{
html += ' <a href="javascript:;" onclick="paging('+i+');" id="' + i + '" pagenumber="'+i+'">' + i + '</a>';
}
}
}
if(last < totalPage){
html += '<a type="button" onclick="paging('+next+');" id="next">다음</a>';
}
if(totalData > 0 && last > 1){
html += ' <a href="javascript:;" onclick="paging('+totalPage+');" id="' + totalPage+ '" pagenumber="'+totalPage+'">마지막</a>';
}
$("#boardPaging").html(html); // 페이지 목록 생성
$("#boardPaging a#" + currentPage).parent('em#active').addClass("active");
$("#boardPaging a").click(function(){
var $item = $(this);
var $id = $item.attr("id");
var selectedPage = $item.text();
if($id == "next") selectedPage = next;
if($id == "prev") selectedPage = prev;
var filter = "win16|win32|win64|mac|macintel";
if ( navigator.platform ) {
if ( filter.indexOf( navigator.platform.toLowerCase() ) < 0 ) { //mobile
$('html, body').scrollTop(1300);
}else { //pc
$('html, body').scrollTop(2600);
}
}
paging(totalData, dataPerPage, pageCount, selectedPage);
});
}▼ 코드를 한 줄, 한 블럭씩 분석해보자~!
var totalData; // 총 데이터 수
var dataPerPage = 10; // 한 페이지에 나타낼 데이터 수
var pageCount = 5; // 한 화면에 나타낼 페이지 수boardPaging 호출 시 들어가는 데이터 중 resultDatas.total을 담을 변수 totalData 생성
dataPerPage는 pageSize와 동일하게 지정
pageCount도 고정이기 때문에 직접 지정
var totalPage = Math.ceil(totalData/dataPerPage); // 총 페이지 수
var pageGroup = Math.ceil(currentPage/pageCount); // 페이지 그룹
var last = pageGroup * pageCount; // 화면에 보여질 마지막 페이지 번호
if(last > totalPage){
last = totalPage;
}totalPage = totaldata / dataPerPage -> 3 = 30 / 10 -> 총 페이지 수 : 3 페이지
pageGroup = currentPage / pageCount -> 1 = 1 / 5 -> 페이지 그룹 :
(5개의 페이지 번호로 묶인 그룹 번호)
last = pageGroup * pageCount -> 5 = 1 * 5
- 한 페이지 그룹에서의 시작 번호와 끝 번호를 정해줍니다
- 위의 계산을 정리하면 1번 페이지 그룹의 시작 번호는 1, 끝 번호는 5가 됩니다.
※ 자바스크립트 메소드
Math.floor() : 소수점 이하를 버림한다.
Math.ceil() : 소수점 이하를 올림한다.
Math.round() : 소수점 이하를 반올림한다.
if(last>totalPage) {
last = totalPage;
}
- 총 페이지 수가 화면에 보여질 마지막 번호보다 작으면 마지막 번호에 총 페이지수를 대입해줍니다.
var first = last - (pageCount-1); // 화면에 보여질 첫번째 페이지 번호
var next = last+1;
var prev = first-1;
if(totalPage < 1){
first = last;
}리스트 화면에 보이는 첫번째 수와, 다음, 이전의 수를 연산해줍니다.
first : 첫번째 수 , next : 다음, prev : 이전
var $pingingView = $("#boardPaging");
$pingingView.empty();
var html = "";jsp 페이지에서 태그의 아이디가 boardPaging인 부분의 내용을 지워줍니다.
※ 자바스크립트 .empty() : 해당 태그에 있는 내용을 지우는 명령어입니다.
해당 태그는 유지되면서 태그에 작성된 내용'만' 지워줍니다.
.remove() : 태그를 포함한 모든 요소를 지울 때 사용되는 명령어입니다.
해당 태그의 내용을 지워준 뒤에 그 부분에 넣어줄 내용을 담을 문자열 html을 생성해 줍니다.
if(totalData > 0 && last > 1){
html += '<a href="javascript:;" onclick="paging(1);" id="1" pagenumber="1">처음</a>';
}
if(prev > 0){
html += '<a href="javascript:;" type="button" onclick="paging('+prev+');" id="prev" >이전</a>';
}- 총 데이터의 수(리스트에 출력될 글의 총 갯수)가 0보다 크고, 마지막 페이지의 수가 1보다 크면, 즉
현재 패이지가 1이 아니라면 '처음' 버튼을 맨 앞에 생성하게 됩니다.
- 이전의 수가 1 이상이면 '이전' 버튼을 생성하게 됩니다.
- 각각 생성되는 버튼을 html 문자열에 추가하여 줍니다.
for(var i= first ; i <= last; i++){
if(i>0){
if(last == i){
html += ' <a href="javascript:;" onclick="paging('+i+');"
id="' + i + '" pagenumber="'+i+'">' + i + '</a>';
}else{
html += ' <a href="javascript:;" onclick="paging('+i+');"
id="' + i + '" pagenumber="'+i+'">' + i + '</a>';
}
}
}- 처음과 끝 사이의 페이지 숫자를 출력하는 부분입니다.
- 처음 숫자(first)부터 마지막 숫자(last)까지 반복해서 출력을 하게 됩니다.
- 이 또한 html 문자열에 추가하여서 후에 jsp에서 볼 수 있습니다.
if(last < totalPage){
html += '<a type="button" onclick="paging('+next+');" id="next">다음</a>';
}
if(totalData > 0 && last > 1){
html += ' <a href="javascript:;" onclick="paging('+totalPage+');"
id="' + totalPage+ '" pagenumber="'+totalPage+'">마지막</a>';
}- 마지막 페이지가 총 페이지수보다 작으면 다음 버튼을 출력하게 됩니다.
- 출력될 리스트의 총 개수가 0보다 크고, 마지막 페이지 번호가 1보다 크면 마지막 버튼을 맨 뒤에 출력하게 됩니다.
$("#boardPaging").html(html); // 페이지 목록 생성
$("#boardPaging a#" + currentPage).parent('em#active').addClass("active");- 해당 아이디의 태그에 페이지 목록을 생성하게 됩니다.
- $( 셀렉터 ).parent() - 셀렉터에 해당하는 부모요소를 가져옵니다.
- $( 셀렉터 ).parent().addClass( '클래스명' ) : 셀렉터에 해당하는 부모요소에 클래스명 클래스 추가합니다.
$("#boardPaging a").click(function(){
var $item = $(this);
var $id = $item.attr("id");
var selectedPage = $item.text();
if($id == "next") selectedPage = next;
if($id == "prev") selectedPage = prev;
var filter = "win16|win32|win64|mac|macintel";
if ( navigator.platform ) {
if ( filter.indexOf( navigator.platform.toLowerCase() ) < 0 ) {
//mobile
$('html, body').scrollTop(1300);
}else { //pc
$('html, body').scrollTop(2600);
}
}
paging(totalData, dataPerPage, pageCount, selectedPage);
});- 마지막 코드는 모바일과 웹에 따라 맞게 출력하게끔 해주는 코드입니다.
- 모바일과 웹에 대한 코드는 추후에 다시 한번 설명하겠습니다.
- 이렇게 하면 기본적인 페이징이 될 것입니다.
'Programing > 기타' 카테고리의 다른 글
| 주석의 정의와 종류 (0) | 2022.12.05 |
|---|---|
| 페이징 - AJAX (1) (0) | 2021.07.13 |
| 페이징 - MSSQL (0) | 2021.07.13 |
| Spring - Tiles (0) | 2021.07.09 |
