Der dynamische Paging-Effekt von jquery ist vergleichbar mit dem von Time.com_jquery

Ich habe kürzlich den Paging-Effekt von jquery untersucht, ich habe gerade eine erstellt und sie mit allen geteilt. Der Paging-Effekt ähnelt dem von Mtime.com.

Platzieren Sie zunächst ein

auf der ASPX-Seite.

Erstellen Sie dann eine page.js-Datei. Der spezifische Code lautet wie folgt (die in js verwendeten CSS-Klassen werden von Ihnen selbst festgelegt, daher werden sie hier nicht angegeben. Für spezifische Details können Sie den CSS-Stil selbst festlegen):

Code kopieren Der Code lautet wie folgt:

$(document).ready(function(){
var pageCount=0;//Gesamtzahl der Seiten, eingestellt in der Datenverarbeitungsfunktion

////////////////////////Die rechte Taste zeigt die Paginierung an
Funktion right(pageCount,limit,rlimit){
var html="";
if(parseInt(pageCount)-limit>=rlimit){
for(var i=parseInt(pageCount)-rlimit 1; i<=parseInt(pageCount); i ){
html ="" i "";}
}
sonst{
for(var i=parseInt(limit) 1; i<=pageCount; i ){
html ="" i "";}
}
return html;
}
///////////////////////////Startseite, letzte Seite, vorherige Seite, nächste Seite
Funktion changeState(pageIndex,pageCount){
var $button1=$("div.pageDivs").find("#Button1");//Vorherige Seite
var $button2=$("div.pageDivs").find("#Button2");//Nächste Seite
var $first=$("div.pageDivs").find("#First");//Homepage
var $last=$("div.pageDivs").find("#Last");//Letzte Seite
if(parseInt(pageIndex)==1){
$first.css("display","none");
$button1.css("display","none");}
sonst{
$first.css("display","inline");
$button1.css("display","inline");
$first.attr("page",1);
$button1.attr("page",parseInt(pageIndex)-1);}
if(parseInt(pageIndex)==pageCount){
$button2.css("display","none");
$last.css("display","none");}
sonst{
$last.css("display","inline");
$button2.css("display","inline");
$last.attr("page",pageCount);
$button2.attr("page",parseInt(pageIndex) 1);}

}
/////////////////////////////////////Die Anzahl der Seitenzahlen, die auf der linken Seite angezeigt werden Spanne dynamisches Paging, die Anzahl der auf der rechten Seite angezeigten Seitenzahlen, Anforderungslimit>rlimit
Funktion span(pageCount,pageIndex,limit,rlimit){
var isContinue=true;//Gibt an, ob die Ausführung der Funktion fortgesetzt werden soll
var html="|<<" ;
var change=(parseInt(pageCount)-parseInt(rlimit))/(parseInt(limit)-2);//Gibt an, wie oft die Seitenzahl geändert werden kann
if(pageCount!=0&&pageCount!=1){
if(pageCount<=limit){
for(var i=1; i<=pageCount; i ){
html ="" i ""}
}
sonst{
if(parseInt(pageIndex)<(limit-2)){
for(var i=1; i<=limit; i ){
html ="" i "";}
html="...";
html =right(pageCount,limit,rlimit);
}
sonst{
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);
}
sonst{
for(var i=1; i<=rlimit; i ){
html ="" i "";}
html="...";
var rest=parseInt(pageCount)-parseInt(rlimit);
if(rest for(var i=parseInt(rlimit) 1; i<=parseInt(pageCount); i ){
html ="" i "";}
}
sonst{
var start=parseInt(pageCount)-parseInt(limit) 1;
for(var i=start; i<=pageCount; i ){
html ="" i "";}
}
}

}
sonst{
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", "#");
}

Funktionsseite(pageIndex){

//////////////Fügen Sie hier Ihre spezifische Datenanzeige ein und verwenden Sie Ajax, um die Daten dynamisch zu laden und zu verarbeiten

pageCount="Gesamtzahl der durch Datenverarbeitung erhaltenen Seiten";

span(pageCount,pageIndex,7,2);//Rufen Sie den Paging-Effekt auf. Hier werden 7 Seitenzahlen links und 2 Seitenzahlen rechts angezeigt.

}

///////////////////////////////Binden Sie Ereignisse für Seitenzahlen

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

Seite(Ergebnis);
});
});

Das ist alles. Der obige Paging-Algorithmus kann gekapselt werden, hat nichts mit dem spezifischen Projekt zu tun und ist universell einsetzbar.