kesan paging dinamik jquery adalah setanding dengan Time.com_jquery

Saya telah mengkaji kesan paging jquery baru-baru ini. Saya baru sahaja membuat satu dan berkongsi dengan semua orang. Kesan paging adalah serupa dengan Mtime.com.

Pertama tempat

ini digunakan untuk menyimpan paging.

Kemudian buat fail page.js Kod khusus adalah seperti berikut (kelas css yang digunakan dalam js ditetapkan sendiri, jadi mereka tidak diberikan di sini. Untuk butiran khusus, anda boleh menetapkan gaya css sendiri):

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi(){
var pageCount=0;//Jumlah bilangan halaman, ditetapkan dalam fungsi pemprosesan data

////////////////////////Butang kanan memaparkan penomboran
fungsi betul(pageCount,limit,rlimit){
var html="";
if(parseInt(pageCount)-limit>=rlimit){
for(var i=parseInt(pageCount)-rlimit 1; i<=parseInt(pageCount); i ){
html ="" i "";}
}
lain{
for(var i=parseInt(limit) 1; i<=pageCount; i ){
html ="" i "";}
}
kembalikan html;
}
///////////////////////////Halaman utama, halaman terakhir, halaman sebelumnya, halaman seterusnya
fungsi changeState(pageIndex,pageCount){
var $button1=$("div.pageDivs").find("#Button1");//Halaman sebelumnya
var $button2=$("div.pageDivs").find("#Button2");//Halaman seterusnya
var $first=$("div.pageDivs").find("#First");//Homepage
var $last=$("div.pageDivs").find("#Last");//Last page
if(parseInt(pageIndex)==1){
$first.css("paparan","tiada");
$button1.css("paparan","tiada");}
lain{
$first.css("display","inline");
$button1.css("display","inline");
$first.attr("halaman",1);
$button1.attr("page",parseInt(pageIndex)-1);}
if(parseInt(pageIndex)==pageCount){
$button2.css("paparan","tiada");
$last.css("paparan","tiada");}
lain{
$last.css("display","inline");
$button2.css("display","inline");
$last.attr("page",pageCount);
$button2.attr("page",parseInt(pageIndex) 1);}

}
/////////////////////////////////////Bilangan nombor muka surat yang dipaparkan di sebelah kiri span paging dinamik, bilangan nombor halaman yang dipaparkan di sebelah kanan, had keperluan>rlimit
rentang fungsi(pageCount,pageIndex,limit,rlimit){
var isContinue=true;//Menunjukkan sama ada untuk terus melaksanakan fungsi
var html="|<<" ;
var change=(parseInt(pageCount)-parseInt(rlimit))/(parseInt(limit)-2);//Menunjukkan bilangan kali nombor halaman boleh ditukar
if(pageCount!=0&&pageCount!=1){
if(pageCount<=limit){
untuk(var i=1; i<=pageCount; i ){
html ="" i ""}
}
lain{
if(parseInt(pageIndex)<(had-2)){
untuk(var i=1; i<=limit; i ){
html ="" i "";}
html="...";
html =right(pageCount,limit,rlimit);
}
lain{
if(parseInt(pageIndex)%(limit-2)==0){
if(parseInt(pageIndex)/(had-2)<=change&&parseInt(pageIndex)-1 parseInt(had)-1<=parseInt(pageCount)-parseInt(rlimit)){
for(var i=parseInt(pageIndex)-1; i html ="" i "";}
html="...";
html =right(pageCount,limit,rlimit);
}
lain{
untuk(var i=1; i<=rlimit; i ){
html ="" i "";}
html="...";
var rest=parseInt(pageCount)-parseInt(rlimit);
jika(rehat for(var i=parseInt(rlimit) 1; i<=parseInt(pageCount); i ){
html ="" i "";}
}
lain{
var start=parseInt(pageCount)-parseInt(had) 1;
for(var i=start; i<=pageCount; i ){
html ="" i "";}
}
}

}
lain{
html=$("div.pageDivs").html();
$("div.pageDivs").html(html);
isContinue=false;
}
}

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

halaman fungsi(pageIndex){

//////////////Letakkan paparan data khusus anda di sini dan gunakan ajax untuk memuatkan dan memproses data secara dinamik

pageCount="Jumlah bilangan halaman yang diperoleh melalui pemprosesan data";

span(pageCount,pageIndex,7,2);//Panggil kesan paging Di sini, ia ditetapkan untuk memaparkan 7 nombor halaman di sebelah kiri dan 2 nombor halaman di sebelah kanan.

}

///////////////////////////////Ikatan acara untuk nombor halaman

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

halaman(hasil);
});
});

Itu sahaja Algoritma paging di atas boleh dirangkumkan, tiada kaitan dengan projek tertentu, dan boleh digunakan secara universal.