jquery paging 부분용

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 라고 나옴.

---

🔗original-link