javascript 페이징 코드(현재 페이지 번호가 중앙에 위치함)_javascript 기술

코드 복사 코드는 다음과 같습니다.

function setPage(opt){
if(! opt.pageDivId || opt.allPageNum < opt.showPageNum){return false}; var allPageNum = opt.allPageNum; = opt.showPageNum; //표시된 페이지 번호
var curpageNum = opt.curpageNum; //현재 페이지 번호
var pageDIvBox = document.getElementById(opt.pageDivId)//페이지 번호 표시 왼쪽 또는 오른쪽 숫자
var lrNum = Math.floor(showPageNum/2)
if(curpageNum>1){
var oA = document.createElement('a')
oA.href =' #1';
oA.innerHTML = '홈'
pageDIvBox.appendChild(oA)
}
if(curpageNum>1){
var oA = document.createElement( 'a')
oA.href='#' (curpageNum-1);
oA.innerHTML = '이전 페이지'
pageDIvBox.appendChild(oA)
}
if ( curpageNumfor(var i=1;i<=showPageNum;i ){
var oA = document.createElement('a')
oA .href = '#' i;
if(curpageNum==i){
oA.innerHTML = i
}else{
oA.innerHTML = "[" i "]";
}
pageDIvBox.appendChild(oA)
}
}else{
//마지막 페이지 처리
if(allPageNum-curpageNumfor(var i=1;i<=showPageNum;i ){
console.log((curpageNum - showPageNum i))
var oA = document.createElement('a') ;
oA.href = '#' (curpageNum - (showPageNum-1) i)
if(curpageNum == (curpageNum - (showPageNum-1) i)){
oA.innerHTML = ( curpageNum - (showPageNum-1) i)
}else{
oA.innerHTML = '[' (curpageNum - (showPageNum-1) i) ']'
}
pageDIvBox.appendChild(oA );
}
}
//마지막 페이지 처리
else if(allPageNum-curpageNumfor(var i=1;i< =showPageNum ;i ){
console.log((curpageNum - showPageNum i))
var oA = document.createElement('a')
oA.href = '#' (curpageNum - showPageNum i) ;
if(curpageNum == (curpageNum - showPageNum i)){
oA.innerHTML = (curpageNum - showPageNum i)
}else{
oA.innerHTML = '[' (curpageNum -showPageNum i) ']'
}
pageDIvBox.appendChild(oA)
}
}else{
for(var i=1;i<=showPageNum;i ){
var oA = document.createElement('a');
oA.href = '#' (curpageNum - (showPageNum-lrNum) i)
if(curpageNum == (curpageNum - (showPageNum-lrNum) ) i)){
oA.innerHTML = (curpageNum - (showPageNum-lrNum) i)
}else{
oA.innerHTML = '[' (curpageNum - (showPageNum-lrNum) i) '] '
}
pageDIvBox.appendChild(oA)
}
}
}
if(curpageNumfor(var i=1;i<= 2 ;i ){
if(i==1){
var oA = document.createElement('a')
oA.href='#' (parseInt(curpageNum) 1); >oA.innerHTML = '다음 페이지'
}else{
var oA = document.createElement('a')
oA.href='#' allPageNum
oA.innerHTML = ' 마지막 페이지'
}
pageDIvBox.appendChild(oA);
}
}
var oA = document.getElementsByTagName('a')//페이지 번호 추가 클릭 event
for(var i=0;ioA[i].onclick = function(){
//현재 지점의 페이지 번호
var sHref = this.getAttribute('href').substring(1);
//페이지 번호 표시 지우기
pageDIvBox.innerHTML = ''
setPage({
pageDivId:'page' ,
showPageNum:5, //표시된 번호
allPageNum:10, //총 페이지 수
curpageNum:sHref //현재 페이지 번호
})
}
}
}
window.onload = function(){
setPage({
pageDivId:'page',
showPageNum:5, //표시된 항목 수
allPageNum:10, / /총 페이지 수
curpageNum:1 //현재 페이지 번호
})
}


어제는 Miaowei Classroom의 페이징 비디오 튜토리얼을 보고 오늘은 그 내용을 따라했습니다. 아이디어를 직접 작성하고 다음으로 '페이지 번호 표시'에 'showPageNum' 속성을 새로 추가했습니다.


다음은 핵심 사항을 요약한 것입니다. 1. 클릭한 현재 페이지 번호는 표시된 페이지 번호의 중앙에 위치해야 합니다.

3페이지, 5페이지, 7페이지, 9페이지... 등을 표시하는지 여부
현재 페이지가 중앙에 위치해야 합니다. 수식을 도출할 수 있습니다
표시된 페이지 수를 사용하여 페이지 번호를 2로 나눈 다음 가장 가까운 정수로 반올림하여 왼쪽과 오른쪽에 표시해야 하는 페이지 번호를 구합니다. 이는 후속 페이징 판단에 매우 유용합니다.
var lrNum = Math.floor(showPageNum/2)
2. 페이지 번호를 가져옵니다. this.getAttribute('href') 이를 사용하여 가져옵니다. 상대 경로;this.href는 절대 경로를 얻는 데만 사용할 수 있습니다

DEMO 온라인 데모
http://demo.jb51.net/js/2012/js_page/