js css_javascript スキルによって実装された、シンプルで使いやすく、互換性のあるページング-jsチュートリアル-php.cn

js css_javascript スキルによって実装された、シンプルで使いやすく、互換性のあるページング

WBOY

リリース： 2016-05-16 17:05:57

オリジナル

1233 人が閲覧しました

効果:
js css_javascript スキルによって実装された、シンプルで使いやすく、互換性のあるページング
html:

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

使用法:

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

 
var total = 310; 
var pageNo = 1; 
var pageCount = 31;合計? 
var pageSize = 10; 
var actionName = "list.action"; 
var otherParam = "&name='www'&order='time'"; 
paginate();//ページネーション} 
); 

 

css:

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

#page{ 
font-size: 14px; 
clear: Both; 
padding-top: 1.45em;空白: nowrap; 
# ページ a{ 
背景: 白; 
表示: インラインブロック; 
行の高さ: 22 ピクセル; 
マージン: 右: 5 ピクセル; 
テキストの装飾: なし; 
垂直方向の配置: 中央; 23px; 
} 
#pagePre,#pageNext { 

} 
.pageCurrent{ 
フォントの太さ: 
} 

 
 js: 



 
コードをコピー

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

function mcPaginate(){ var $pageDiv = $("#page"); actionName = actionName "?pageSize=" pageSize;

if(typeof otherParam != '未定義' && otherParam != ""){
actionName = actionName otherParam>}

$pageDiv.append("pageNo "page/total" pageCount "page");

//前のページ
if(pageNo > 1) {
var hf = actionName "&pageNo=" (pageNo-1);
$pageDiv.append("" "上 1 ページ" "");
};

if(pageCount <= pageSize){
for (var i=0; i var hf = actionName "&pageNo=" (i 1)
if(pageNo == (i 1)){//現在のページ
$pageDiv.append("" pageNo "");
}else{
$pageDiv.append(" " ( i 1) "");
};
};
}else{
for(var i= 0; i < pageSize; i ){
var midIndex = 0){
midIndex = pageSize/2 - 1; >midIndex = pageSize/2;
var num = -midIndex;
var showPageNum = pageNo;

if(showPageNum > 0 && showPageNum <= pageCount){

var hf = actionName " &pageNo=" showPageNum;
if(pageNo == showPageNum){//現在のページ
$pageDiv.append("" showPageNum "< ;/a>");
}else{
$pageDiv.append("" "");
}
}

//次のページ
if(pageNo < pageCount); 🎜>var hf = actionName "&pageNo=" (pageNo 1 );
$pageDiv.append("" "次のページ" " ");
} ;

$pageDiv.append("移動" "page");

$(".goButton").click (function(){
var goNum = $(".goNum").val();
if(goNum!=""){
window.location.href = actionName "&pageNo=" goNum ;
}
});