jquery paging 부분용

less than 1 minute read

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)&lt;=0?-1:(st-1));
	span.text('이전');
	spans.push(span);
  

	for(var i=st,m=ed;i&lt;=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)&gt;=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&lt;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 &amp;&amp; event.target.tagName =='SPAN' &amp;&amp; event.target.page &amp;&amp; event.target.page&gt;0){
		submitPaging(event.target.page)
  

	}
	return false;
}
$(function(){ //		$('#paging').click(			function(event){clickPaging(event,this)}			);
		showPaging(1,0)
}) &lt;/script&gt;

HTML

<div id=”paging” class=”paging” onclick=”clickPaging(event)”><span >-</span></div>


결과

처음이전2122232425262728다음마지막


만드는것도 일이다.. 나중에 복사해서 써야지.

showPaging(1,0) 두번째에 0이하의 값을 넣으면 NoPage 라고 나옴.


🔗original-link

Updated: