jQuery-Front-End-Paging-Beispiel „sharing_jquery“.

Wenn Leute Paging durchführen, geben die meisten von ihnen einen HTML-String für die Navigationsleiste im Hintergrund zurück. Tatsächlich ist dies auch einfach mit js im Frontend zu implementieren.

Rufen Sie die Pager-Methode auf, geben Sie Parameter ein und eine HTML-Zeichenfolge der Navigationsleiste wird zurückgegeben. Die Interna der Methode sind relativ einfach.

Code kopieren Der Code lautet wie folgt:

/**
* pageSize, Anzahl, die pro Seite angezeigt wird
* pageIndex, aktuelle Seitennummer
* pageCount Gesamtzahl der Seiten
* URL-Verbindungsadresse
* Beispiel für die Verwendung von pager(10, 1, 5, 'Index')
*/
Funktion pager(pageSize, pageIndex, pageCount, url) {
var intPage = 7; //Zahlenanzeige
var intBeginPage = 0;//Anzahl der Startseiten
var intEndPage = 0;//Endseitenzahl
var intCrossPage = parseInt(intPage / 2); //Angezeigte Zahl
var strPage = "

page" pageIndex "/" pageCount " Seite pro Seite< ;font color='#FF0000'>" pageSize " stripes";
If (pageIndex > 1) {
           strPage = strPage "Homepage ";
strPage = strPage "Vorherige Seite< /a> ; ";
}
If (pageCount > intPage) {//Die Gesamtzahl der Seiten ist größer als die Anzahl der auf der Seite angezeigten Seiten
If (pageIndex > pageCount - intCrossPage) {//Aktuelle Seitennummer >Gesamtzahl der Seiten-3
               intBeginPage = pageCount - intPage 1;
               intEndPage = pageCount;
}
         sonst {
If (pageIndex <= intPage - intCrossPage) {
                  intBeginPage = 1;
                 intEndPage = intPage;
            }
             sonst {
                  intBeginPage = pageIndex - intCrossPage;
intEndPage = pageIndex intCrossPage;
            }
}
} sonst {
intBeginPage = 1;
          intEndPage = pageCount;
}
Wenn (pageCount > 0) {
for (var i = intBeginPage; i <= intEndPage; i ) {
                {
If (i == pageIndex) {//Aktuelle Seite
                       strPage = strPage " " i " ";
                }
                   sonst {
strPage = strPage " " i " " ;
                }
            }
}
}
If (pageIndex < pageCount) {
strPage = strPage "Nächste Seite ";
        strPage = strPage "尾页 ";
    }
    return strPage "

";
}

Probieren Sie diese Methode aus

复制代码

http://www.w3.org/1999/xhtml">

   
   
   
   
   


   

       
           
               
               
               
               
               
               
               
               
               
               
               
           
       
       
   

CustomerID	Firmenname	Kontaktname	ContactTitle	Adresse	Stadt	Region	Postleitzahl	Land	Telefon	Fax

   

[/code]

看下效果

列有点多, 我只截图了部分, 界面好丑, 加点样式, 用bootstrap来美化下

使用Nuget安装bootstrap

加上样式后

虽说不是特别漂亮,但还是对得起观众吧.

代码下载https://github.com/dengjianjun/JsPager

如果觉得对你有帮助，请点个赞，谢谢！