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


댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
4.28
4.29
4.30
5.1
5.2
5.3
5.4
5.5
5.6
5.7
5.8
5.9
5.10
5.11
5.12
5.13
5.14
5.15
5.16
5.17
5.18
5.19
5.20
5.21
5.22
5.23
5.24
5.25
5.26
5.27
5.28
5.29
5.30
5.31
6.1