JS 페이징(SA_GRID-v1.0)

SA Jung·2023년 4월 5일
0

JS & React JS

목록 보기
4/6

SA_GRID-v1.0

JAVA-jsp 이용

필수조건(ajax로 받아와야할 data)

  • list : 조회된 게시글 list
  • pageNum : 현재 페이지번호
  • pageSize : 보여줄 페이지 갯수
  • rowSize : 보여줄 게시글 갯수
  • totCnt : 게시글 총 갯수

HTML

<html>
<head>
</head>
<body>

	// 테이블 들어가는 부분
	<div id ="grid_table"></div>
    // 페이징 들어가는 부분
	<div id="pagination"></div>
	
</body>
<script>
$(function(){
  paging(1);
}

function paging(pageNum){
	$.ajax({
		type : 'post',
		url : "pagination.do",
		data : {pageNum : pageNum
				,pageSize : 3 // 보여줄 페이지 갯수
				,rowSize : 5  // 보여줄 게시글 갯수
				},
		success:function(data){
			console.log("succ? : ", data);
			grid_title(["head1","head2","head3","head4"]);  // 테이블 head
			grid_list(data,["con1","con2","con3","con4"]);  // 테이블 column 내용
			grid_pagination(data) // 페이징 그리기
		}
	});
}	
</script>
</html>

CSS

	#pagination {
	  display: inline-block;
	}
	#pagination a { 
	  float: left;
	  padding: 8px 16px;
	  text-decoration: none;
	  border-radius: 5px;
	  cursor: pointer;
	}
	#pagination a.active {
	  background-color: #4CAF50;
	  color: white;
	  border-radius: 5px;
	}
	#pagination a:hover:not(.active) {background-color: #ddd;}
	.pageSelect{
		color: orange;
		font-weight: bold;
	}
	.disabled{
		color: #eae9e9;
		pointer-events: none;
	}

JS

// grid_table (title포함) 만들기
// title 설정 : 커스텀 이름 설정
function grid_title(head){
    var html = '<table><thead><tr>';
    for (h of head){
        html += '<th>'+h+'</th>';
    }		
	html += '</tr></thead><tbody id="grid_content"></tbody></table>';
    $("#grid_table").html(html);
}

// grid_content 조회 값 넣기
// list : JSON 형태로 된 조회 리스트
// key : JSON안의 key로서 grid_title에서 설정한 head의 갯수와 동일할 것!
function grid_list(data, key){
    var html = "";
    for (var i=0; i<data.list.length; i++){
        html += '<tr>';
        for (k of key){
            html += '<td>'+data.list[i][k]+'</td>';
        }
        html += '</tr>';
    }
    $("#grid_content").html(html);
}

// pagination 구하기
// maxPage = 마지막페이지 
// indexPage = 현재페이지의 페이지index
// indexMaxPage = 마지막페이지의 페이지index
// startPage = 현재페이지의 페이지index의 시작페이지
// endPage = 현재페이지의 페이지index의 마지막페이지
function grid_pagination(data){
    var maxPage = Math.ceil(data.totCnt/data.rowSize);
    var indexPage = Math.ceil(data.pageNum/data.pageSize);
    var indexMaxPage = Math.ceil(maxPage/data.pageSize);
    var startPage = (indexPage-1)*data.pageSize+1
    var endPage = indexPage*data.pageSize
    var html = '<a id="pprev">&laquo;</a>';
    html += '<a id="prev"token operator">+(indexPage-1)*data.pageSize+')">&lt;</a>';
    for(var i=startPage; i<=endPage; i++){
        if (i >maxPage){
            break;
        }
        if (i == data.pageNum){
            html += '<a class="pageSelect"token operator">+i+')">'+i+'</a>';
        }else{
            html += '<atoken operator">+i+')">'+i+'</a>';
        }
    }
    html += '<a id="next"token operator">+(parseInt(indexPage*data.pageSize)+1)+')">&gt;</a>';
    html += '<a id="nnext"token operator">+maxPage+')">&raquo;</a>';
    $("#pagination").html(html);
    if (indexPage == 1){
        $('#prev').removeAttr('onclick');
        $('#pprev').removeAttr('onclick');
        $('#prev').addClass('disabled');
        $('#pprev').addClass('disabled');
    }else if(indexPage == indexMaxPage){
        $('#next').removeAttr('onclick');
        $('#nnext').removeAttr('onclick');
        $('#next').addClass('disabled');
        $('#nnext').addClass('disabled');
    }
}
profile
Tomorrow will be better than yesterday :)

0개의 댓글