JavaScript ページング コード (現在のページ番号が中央に表示される)_JavaScript スキル

コードをコピー コードは次のとおりです。

function setPage(opt){
if(! opt.pageDivId || opt.allPageNum < opt.showPageNum){return false}; // 合計ページ数
= opt. showPageNum; // 表示されるページ番号
var curpageNum = opt.curpageNum; // ページ番号を表示します。左または右 Number
var lrNum = Math.floor(showPageNum/2);
if(curpageNum>1){
var oA = document.createElement('a'); =' #1';
oA.innerHTML = 'ホーム'
pageDIvBox.appendChild(oA);
if(curpageNum>1){
var oA = document.createElement( 'a ');
oA.href='#' (curpageNum-1);
oA.innerHTML = '前のページ'
pageDIvBox.appendChild(oA); ( 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;iconsole.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;最後のページ'
}
pageDIvBox.appendChild(oA);
}
}
var oA = document.getElementsByTagName('a'); // ページ番号を追加しますイベント
for(var i=0;ioA[i].onclick = function(){
// 現在のポイントのページ番号
var sHref = this.getAttribute('href').substring(1);
//ページ番号表示をクリア
pageDIvBox.innerHTML = '';
pageDivId:'page' ,
showPageNum:5, //表示される番号
allPageNum:10, //総ページ数
curpageNum:sHref //現在のページ番号
})
}
}
}
window.onload = function(){
setPage({
pageDivId:'page',
showPageNum:5, //表示される項目数
allPageNum:10, / /合計ページ数
curpageNum:1 //現在のページ番号
})
}


昨日は苗威教室のページングビデオチュートリアルを見て、今日はそれに従った次に、「ページ番号の表示」の新しい属性「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/