## CSS
<style>
.paging{text-align:center;margin:2px;padding:2px; }
.paging span{cursor:pointer; margin:2px;padding:2px;border-radius: 2px;}
.paging span.current, #paging span:hover{background-color:#369;color:#fff}
</style>
## JAVASCRIPT
<script>
	//-- 페이징 관련
	function showPaging(page,totalPage){
		page = parseInt(page);
		totalPage = parseInt(totalPage);
		var paging = $('#paging');
		paging.html("");
		var defSpan = $(document.createElement('span'));
		var limit = 10;
		var st = Math.floor((page-1)/limit)*(limit)+1;
		var ed = Math.min(st+limit-1,totalPage);
		var spans = [];
		if(totalPage<=0){
			paging.html("NoPage");
			return;
		}
		var span = defSpan.clone();
		span.prop('page',1);
		span.text('처음');
		spans.push(span);
		var span = defSpan.clone();
		span.prop('page',(st-1)<=0?-1:(st-1));
		span.text('이전');
		spans.push(span);
		for(var i=st,m=ed;i<=m;i++){
			var span = defSpan.clone();
			span.prop('page',i);
			if(i == page){
				span.addClass('current');
			}
			span.text(i);
			spans.push(span);
		}
		var span = defSpan.clone();
		span.prop('page',(ed+1)>=totalPage?-1:(ed+1));
		span.text('다음');
		spans.push(span);
		var span = defSpan.clone();
		span.prop('page',totalPage);
		span.text('마지막');
		spans.push(span);
		
		for(var i=0,m=spans.length;i<m;i++){
			paging.append(spans[i]);
		}
	}
	function submitPaging(n){
		if(!selectedShForm){return false;}
		selectedShForm.page.value = n;
		if(selectedShForm.onsubmit()){
			selectedShForm.submit();
		}
	}
	function clickPaging(event,paging){
		event = $(event)[0];
		if(event.target && event.target.tagName =='SPAN' && event.target.page && event.target.page>0){
			submitPaging(event.target.page)
		}
		return false;
	}
	$(function(){
//		$('#paging').click(			function(event){clickPaging(event,this)}			);
			showPaging(1,0)
	})
</script>
## HTML
<div id="paging" class="paging" onclick="clickPaging(event)"><span >-</span></div>
## 결과
처음이전2122232425262728다음마지막
만드는것도 일이다..
나중에 복사해서 써야지.
showPaging(1,0) 두번째에 0이하의 값을 넣으면 NoPage 라고 나옴.