SA_GRID-v1.2
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_list(data,["h1","h2","h3","h4"],["con1","con2","con3","con4"]); // head, 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_list (head, column 포함) 만들기
// head : 커스텀 head 이름 설정
// key : JSON안의 key로서 grid_title에서 설정한 head의 갯수와 동일할 것!
function grid_list(data, head, key){
// 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);
// list 생성 (조회 리스트)
var html = "";
if (data.list.length ==0){ // 조회된 list가 없을 때,
html += '<tr><td colspan="'+key.length+'">조회 결과가 없습니다.</td></tr>';
}else{
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)==0)?1:Math.ceil(data.totCnt/data.rowSize);
var indexPage = Math.ceil(data.pageNum/data.pageSize);
var indexMaxPage = (Math.ceil(maxPage/data.pageSize)==0)?1: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');
}
if(indexPage == indexMaxPage){
$('#next').removeAttr('onclick');
$('#nnext').removeAttr('onclick');
$('#next').addClass('disabled');
$('#nnext').addClass('disabled');
}
}