javascript paging code (current page number is centered)

javascript paging code (current page number is centered)_javascript skills

WBOY

Release： 2016-05-16 17:50:01

Original

1125 people have browsed it

Copy code The code is as follows:

 
function setPage(opt){ 
if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum){return false}; 
var allPageNum = opt.allPageNum; //Total number of pages 
var showPageNum = opt. showPageNum; //Displayed page number
var curpageNum = opt.curpageNum; //Current page number
var pageDIvBox = document.getElementById(opt.pageDivId); 
//Display page number on the left or right Number
var lrNum = Math.floor(showPageNum/2); 
if(curpageNum>1){ 
var oA = document.createElement('a'); 
oA.href=' #1'; 
oA.innerHTML = 'Home' 
pageDIvBox.appendChild(oA); 
} 
if(curpageNum>1){ 
var oA = document.createElement('a '); 
oA.href='#' (curpageNum-1); 
oA.innerHTML = 'Previous page' 
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{ 
//Processing of the last page
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 ); 
} 
} 
//Last page processing
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 = 'Next page' 
}else{ 
var oA = document.createElement('a'); 
oA.href='#' allPageNum; 
oA.innerHTML = 'Last page' 
} 
pageDIvBox.appendChild(oA); 
} 
} 
var oA = document.getElementsByTagName('a'); 
//Add the page number Click event 
for(var i=0;ioA[i].onclick = function(){ 
//The page number of the current point
var sHref = this.getAttribute('href').substring(1); 
//Clear the page number display
pageDIvBox.innerHTML = ''; 
setPage({ 
pageDivId:'page', 
showPageNum:5, //Number displayed
allPageNum:10, //Total number of pages
curpageNum:sHref //Current page number
}) 
} 
} 
 } 
window.onload = function(){ 
setPage({ 
pageDivId:'page', 
showPageNum:5, //Number of items displayed
allPageNum:10, //Total Number of pages 
curpageNum:1 //Current page number 
}) 
} 

Yesterday I watched the paging video tutorial of Miaowei Classroom, and today I followed its ideas and wrote it myself Next, I added a new attribute 'showPageNum' of 'display page number';

The following is a summary of the key points:

1. The clicked current page number needs to be centered in the displayed page number;
Whether it is displaying 3 pages, 5 pages, 7 pages, 9 pages... etc.
The current page must be centered, you can derive a formula
Use the displayed Divide the number of page numbers by 2 and then round to the nearest integer to get the number of page numbers that need to be displayed on the left and right. This is very useful for subsequent paging judgment
var lrNum = Math.floor(showPageNum/2);

2. Get the page number
this.getAttribute('href') Use it to get the relative path ;this.href can only be used to get the absolute path

DEMO online demohttp://demo.jb51.net/js/2012/js_page/