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 ;
}
});