jquery를 이용한 테이블 만들기

jquery 및 ajax를 사용하여 페이징 처리가 가능한 테이블 만들기

 

document.addEventListener("DOMContentLoaded", function(){
	makeTestTable();
	$(document).on("click","li",function(){
		var curPage = $(this).data().pageNo;
		makeTestTable(curPage);
	})
});

function makeTestTable(curPage){
	
	$("#tableBody").empty();
	
	$.ajax({
		url: url,
		data : calculatePagination(curPage),
		success: function(result){
				var totalCnt = result.totalCnt;
				$.each(result.data,function(idx,item){
					var className = "odd pointer";
					if(0 == idx%2){
						className = "even pointer";
					}
					var row = 	'<tr class="'+className+'">';
						row += 	'<td>'+(idx + 1)+'</td>';
						row += 	'<td>'+item.CUST_NAME+'</td>';
						row += 	'<td>'+item.CUST_NAME+'</td>';
						row += 	'<td>'+item.CUST_NAME+'</td>';
						row += 	'<td>'+item.CUST_NAME+'</td>';
						row += 	'<td>'+item.CUST_NAME+'</td>';
						row += 	'<td>'+item.CUST_NAME+'</td>';
						row += 	'<td>'+item.CUST_NAME+'</td>';
						row += 	'<td>'+item.CUST_NAME+'</td>';
						row += 	'<td>'+item.CUST_NAME+'</td>';
						row += 	'</tr>';
					$("#tableBody").append(row);
				});
				
				makePagination(result.totalCnt,curPage);
    	}
	});
}

function calculatePagination(curPage, pageSize){
	
	if(!pageSize){
		pageSize = 10;
	}
	
	if(!curPage){
		curPage = 1;
	}
	var startRowNum = (curPage * pageSize) - pageSize;
	
	return {
			startRowNum : startRowNum,
			pageSize : pageSize
	}
}

function makePagination(totalCnt, curPage, pageSize){
	$("#pagination").empty();
	
	if(0 == totalCnt){
		return;
	}
	if(!pageSize){
		pageSize = 10;
	}
	if(!curPage){
		curPage = 1;
	}
	var blockSize = 5;
	var finalPage = Math.ceil(totalCnt/pageSize);
	var blockNo = Math.ceil(curPage/blockSize);
	var endPage = blockNo*blockSize;
	var startPage = endPage - blockSize + 1;
	
	var ul = $('<ul class="pagination"/>');
	
	if(finalPage < endPage){
		endPage = finalPage;
	}
	
	if(startPage > 1){
		var li = $('<li class="page-item"/>');
		var a = $('<a class="page-link">Previous</a>');
		li.append(a);
		li.data("pageNo",startPage - 1);
		ul.append(li);
	}
	
	for(var i = startPage; i <= endPage; i++ ){
		var li = $('<li class="page-item"/>');
		
		if(i == curPage){
			li.addClass("active");
		}
		
		var a = $('<a class="page-link">');
		a.text(i);
		li.append(a);
		li.data("pageNo",i);
		ul.append(li);
	}
	
	if(endPage < finalPage){
		var li = $('<li class="page-item"/>');
		var a = $('<a class="page-link">Next</a>');
		li.append(a);
		li.data("pageNo",endPage+1);
		ul.append(li);
	}
	
	$("#pagination").append(ul);
}