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">«</a>';
html += '<a id="prev"token operator">+(indexPage-1)*data.pageSize+')"><</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)+')">></a>';
html += '<a id="nnext"token operator">+maxPage+')">»</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');
}
}
Tomorrow will be better than yesterday :)