jquery の動的ページング効果は Time.com_jquery に匹敵します

私は最近 jQuery のページング効果を研究していて、それを作成してみんなと共有しました。ページング効果は Mtime.com の効果と似ています。

まず、aspx ページに

を配置します。これはページングを保存するために使用されます。

次に、page.js ファイルを作成します。具体的なコードは次のとおりです (js で使用される CSS クラスは自分で設定するため、ここでは示しません。詳細については自分で CSS スタイルを設定できます)。 >

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

$(document).ready(function(){
var pageCount=0;//データ処理関数で設定される総ページ数

////////////////////////右ボタンでページネーションを表示
function right(pageCount,limit,rlimit){
var html="";
if(parseInt(pageCount)-limit>=rlimit){
for(var i=parseInt(pageCount)-rlimit 1; i html ="" i "";}
}
それ以外{
for(var i=parseInt(limit) 1; i html ="" i "";}
}
HTML を返す;
}
////////////////////////////ホームページ、最後のページ、前のページ、次のページ
function changeState(pageIndex,pageCount){
var $button1=$("div.pageDivs").find("#Button1");//前のページ
var $button2=$("div.pageDivs").find("#Button2");//次のページ
var $first=$("div.pageDivs").find("#First");//ホームページ
var $last=$("div.pageDivs").find("#Last");//最後のページ
if(parseInt(pageIndex)==1){
$first.css("表示","なし");
$button1.css("表示","なし");}
それ以外{
$first.css("表示","インライン");
$button1.css("表示","インライン");
$first.attr("ページ",1);
$button1.attr("ページ",parseInt(pageIndex)-1);}
if(parseInt(pageIndex)==pageCount){
$button2.css("表示","なし");
$last.css("表示","なし");}
それ以外{
$last.css("表示","インライン");
$button2.css("表示","インライン");
$last.attr("ページ",pageCount);
$button2.attr("ページ",parseInt(pageIndex) 1);}

}
////////////////////////////////////// 左側に表示されるページ数スパンダイナミックページング、右側に表示されるページ番号の数、要件制限>rlimit
関数span(pageCount,pageIndex,limit,rlimit){
var isContinue=true;//関数の実行を継続するかどうかを示します
var html="|<<" ;
var change=(parseInt(pageCount)-parseInt(rlimit))/(parseInt(limit)-2);//ページ番号を変更できる回数を示します
if(pageCount!=0&&pageCount!=1){
if(pageCount<=limit){
for(var i=1; i html ="" i ""}
}
それ以外{
if(parseInt(pageIndex)<(limit-2)){
for(var i=1; i html ="" i "";}
html="...";
html =right(pageCount,limit,rlimit);
}
それ以外{
if(parseInt(pageIndex)%(limit-2)==0){
if(parseInt(pageIndex)/(limit-2)<=change&&parseInt(pageIndex)-1 parseInt(limit)-1<=parseInt(pageCount)-parseInt(rlimit)){
for(var i=parseInt(pageIndex)-1; i html ="" i "";}
html="...";
html =right(pageCount,limit,rlimit);
}
それ以外{
for(var i=1; i html ="" i "";}
html="...";
varrest=parseInt(pageCount)-parseInt(rlimit);
if(休憩<リミット){
for(var i=parseInt(rlimit) 1; i html ="" i "";}
}
それ以外{
var start=parseInt(pageCount)-parseInt(limit) 1;
for(var i=start; i html ="" i "";}
}
}

}
それ以外{
html=$("div.pageDivs").html();
$("div.pageDivs").html(html);
isContinue=false;
}
}

}
}
if(isContinue){
html =">>|";
$("div.pageDivs").html(html);}
changeState(pageIndex,pageCount);
$("div.pageDivs").find("a[page=" parseInt(pageIndex) "]:visible").removeAttr("href").removeClass("disabled").addClass("current").siblings ("a[page:visible").removeClass("current").addClass("disabled").attr("href", "#");
}

関数ページ(pageIndex){

//////////////ここに特定のデータ表示を配置し、ajax を使用してデータを動的にロードして処理します

pageCount="データ処理によって取得された総ページ数";

span(pageCount,pageIndex,7,2);//ページング効果を呼び出します。ここでは、左側に 7 つのページ番号、右側に 2 つのページ番号を表示するように設定されています。

}

///////////////////////////////ページ番号のバインドイベント

$("div.pageDivs").find("a:visible").live("click",function(){
var result=$(this).attr("ページ");
if((typeof $(this).attr("leaf"))!= '未定義'){
$(this).removeAttr("href").removeClass("disabled").addClass("current").siblings().removeClass("current").addClass("disabled").attr("href", "#");}

ページ(結果);
});
});

上記のページング アルゴリズムはカプセル化でき、特定のプロジェクトとは関係がなく、普遍的に使用できます。