Dieser Artikel beschreibt die Verwendung des JS -Paginationsinstruments. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
JS -Code -Teil:
Kopieren Sie den Code wie folgt:/**
* Pagination JS
*/
var page;
(Funktion(){
var page = {Version: "1.0", Autor: "LiuxingMi"};
var showPage = 9;
Seite.Navigation = Funktion (Divid, TotalRecord, TotalPage, CurrentPage, Func) {
var nav = '<ul class =/"pagination/" title =/"pagination list/">';
NAV += '<li> Gesamtdatensätze: <i id = "TotalRecord">' +TotalRecord +'</i> </li>';
NAV + = '<li> Gesamtseitenanzahl: <i id = "TotalPage">' + TotalPage + '</i> </li>';
nav + = '<li> aktuelle Seite: <b id = "pagenum">' + currentPage + '</b> </li>';
if (currentPage == 1) {
NAV += '<li> <a href = "JavaScript: void (0);" id = "Firstpage"> Home </a> </li> ';
NAV += '<li> <a href = "JavaScript: void (0);" id = "FrontPage"> vorherige Seite </a> </li> ';
} anders {
NAV + = '<li> <a href = "JavaScript:' + func + '(1);" id = "Firstpage"> Home </a> </li> ';
NAV + = '<li> <a href = "JavaScript:' + func + '(' + (currentPage -1) + ');" id = "FrontPage"> vorherige Seite </a> </li> ';
}
NAV += '<li id = "num"> <ol>';
var start = currentPage - math.floor (showPage/2);
var end = currentPage + math.floor (showPage/2);
if (Ende> Gesamtseite) {
Start - = (Ende - Gesamtseite);
}
if (start <= 0) {
Start = 1;
}
if (currentPage <showPage && end <ShowPage) {
End = ShowPage;
}
if (Ende> Gesamtseite) {
Ende = Gesamtpage;
}
für (var i = start; i <= end; i ++) {
if (i == currentPage) {
nav + = '<li> <a href = "javaScript:' + func + '(' + i + ');">' + i + '</a> </li>';
} anders {
nav + = '<li> <a href = "javaScript:' + func + '(' + i + ');">' + i + '</a> </li>';
}
}
NAV += '</ol> </li>';
if (currentPage == TotalPage) {
NAV += '<li> <a href = "JavaScript: void (0);" id = "NextPage"> Letzte Seite </a> </li> ';
NAV += '<li> <a href = "JavaScript: void (0);" id = "lastPage"> letzte Seite </a> </i> ';
} anders {
NAV + = '<li> <a href = "JavaScript:' + func + '(' + (currentPage + 1) + ');" id = "NextPage"> Letzte Seite </a> </li> ';
NAV + = '<li> <a href = "JavaScript:' + func + '(' + TotalPage + ');" id = "lastPage"> letzte Seite </a> </i> ';
}
NAV += '</ul>';
$ ("#" + divid) .html (nav);
};
this.page = Seite;
}) ();
CSS -Teil:
Kopieren Sie den Code wie folgt:/*Seitenstils*/
.Pagination{
Überlauf: versteckt;
Rand: 0 0 0 25px;
Polsterung: 10px 10px 6px 150px;
Border-Top: 1PX Solid #C8C8C8;
_zoom: 1;
Text-Align: Mitte;
}
.Pagination *{
Anzeige: Inline;
float: links;
Rand: 0;
Polsterung: 0;
Schriftgröße: 12px;
}
.Pagination i {
Float: Keine;
Padding-Right: 1PX;
}
.
Float: Keine;
Farbe:#f00;
}
.Pagination li {
Listenstil: Keine;
Rand: 0 5px;
}
.Pagination li li {
Position: Relativ;
Rand: -2px 0 0;
Schriftfamilie: Arial, Helvetica, Sans-Serif
}
.Firstpage a,. -PreviousPage a, .NextPage a, .lastpage a {
Überlauf: versteckt;
Höhe: 0;
textindent: -9999em;
Border-Top: 8PX Solid #FFF;
Border-Bottom: 8PX Solid #fff;
}
.Pagination li li a {
Rand: 0 1px;
Polsterung: 0 4px;
Grenze: 3px Double #ffff;
+Grenzfarbe: #eee;
Hintergrund: #eee;
Farbe:#06f;
Textdekoration: Keine;
}
.Pagination li li a: schwebe {
Hintergrund:#F60;
Grenzfarbe: #ffff;
+Grenzfarbe:#F60;
Farbe: #ffff;
}
li.firstpage {
Rand-Links: 40px;
Border-Links: 3px Solid #06f;
}
.Firstpage a, .PreviousPage A {{
Grenzrechte: 12px Solid #06f;
}
.Firstpage A: Hover,.
Grenzrechtsfarbe: #F60;
}
.NextPage a, .lastpage a {
Border-Links: 12px Solid #06f;
}
.NextPage A: Hover,.
Border-Links-Farben:#F60;
}
.Pagination li.lastpage {
Grenzrechte: 3px solide #06f;
}
.Pagination li li li.currentState a {{
Position: Relativ;
Rand: -1px 3px;
Polsterung: 1px 4px;
Grenze: 3px Double #ffff;
+Grenzfarbe:#F60;
Hintergrund:#F60;
Farbe: #ffff;
}
.Pagination li.currentState,.
Grenzfarbe: #ffff #ccc;
Cursor: Standard;
}
/*Paginierungsstil endet*//
Aufrufmethode:
Die Codekopie lautet wie folgt: Seite.navigation ("pagenav", 100, 10, 1, "xxxxlist");
<div id = "pagenav"> </div>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.