Cet article décrit l'utilisation de l'outil de pagination JS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Partie de code JS:
Copiez le code comme suit: / **
* Pagination JS
* /
var page;
(fonction(){
var page = {version: "1.0", auteur: "liuxingmi"};
var showPage = 9;
Page.navigation = fonction (divid, totalRecord, totalpage, currentpage, func) {
var nav = '<ul class = / "pagination /" title = / "pagination list /">';
nav + = '<li> enregistrements totaux: <i id = "totalRecord">' + totalRecord + '</i> </li>';
NAV + = '<li> Nombre de pages totales: <i id = "TotalPage">' + TotalPage + '</i> </li>';
nav + = '<li> page actuelle: <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"> page précédente </a> </li> ';
} autre {
nav + = '<li> <a href = "javascript:' + func + '(1);" id = "firstPage"> home </a> </li> ';
nav + = '<li> <a href = "javascript:' + func + '(' + (currentPage -1) + ');" id = "frontpage"> page précédente </a> </li> ';
}
nav + = '<li id = "num"> <l>';
var start = currentPage - math.floor (showPage / 2);
var end = currentPage + math.floor (showPage / 2);
if (end> totalpage) {
start - = (end - totalpage);
}
if (start <= 0) {
démarrer = 1;
}
if (currentPage <showPage && end <showpage) {
end = showPage;
}
if (end> totalpage) {
end = totalpage;
}
for (var i = start; i <= end; i ++) {
if (i == currentPage) {
nav + = '<li> <a href = "javascript:' + func + '(' + i + ');">' + i + '</a> </li>';
} autre {
nav + = '<li> <a href = "javascript:' + func + '(' + i + ');">' + i + '</a> </li>';
}
}
nav + = '</l> </li>';
if (currentPage == TotalPage) {
nav + = '<li> <a href = "javascript: void (0);" id = "nextPage"> Dernière page </a> </li> ';
nav + = '<li> <a href = "javascript: void (0);" id = "lastpage"> dernière page </a> </i> ';
} autre {
nav + = '<li> <a href = "javascript:' + func + '(' + (currentPage + 1) + ');" id = "nextPage"> Dernière page </a> </li> ';
nav + = '<li> <a href = "javascript:' + func + '(' + totalpage + ');" id = "lastpage"> dernière page </a> </i> ';
}
nav + = '</ul>';
$ ("#" + divid) .html (nav);
};
this.page = page;
}) ();
CSS Partie:
Copiez le code comme suit: / * Le style de page démarre * /
.pagination{
débordement: caché;
marge: 0 0 0 25px;
rembourrage: 10px 10px 6px 150px;
Border-top: 1px solide # c8c8c8;
_zoom: 1;
Texte-aligne: Centre;
}
.Pagination * {
Affichage: en ligne;
flottant: à gauche;
marge: 0;
rembourrage: 0;
taille de police: 12px;
}
.Pagination I {
float: aucun;
rembourrage à droite: 1px;
}
.CurrentPage b {
float: aucun;
Couleur: # F00;
}
.Pagination Li {
Style de liste: aucun;
marge: 0 5px;
}
.Pagination Li Li {
Position: relative;
marge: -2px 0 0;
Font-Family: Arial, Helvetica, Sans-Serif
}
.firstpage a, .previouspage a, .nextpage a, .lastpage a {
débordement: caché;
hauteur: 0;
Texte-indent: -9999em;
Border-top: 8px solide #fff;
Border-Bottom: 8px solide #FFF;
}
.Pagination li li a {
marge: 0 1px;
rembourrage: 0 4px;
Border: 3px double #ffff;
+ Border-Color: #eee;
Contexte: #eee;
Couleur: # 06f;
Décoration du texte: aucune;
}
.Pagination Li Li A: Hover {
Contexte: # F60;
Border-Color: #FFFF;
+ Border-Color: # F60;
Couleur: #ffff;
}
li.firstpage {
marge-gauche: 40px;
Border-Left: 3px solide # 06f;
}
.firstpage a, .previouspage a {
Border-droite: 12px Solid # 06F;
}
.
Border-Right-Color: # F60;
}
.NextPage a, .lastpage a {
Border-Left: 12px solide # 06f;
}
.NextPage A: Hover, .LastPage A: Hover {
Border-Left-Color: # F60;
}
.Pagination li.lastpage {
Border-Dight: 3px Solid # 06F;
}
.Pagination li li li.currentState a {
Position: relative;
marge: -1px 3px;
rembourrage: 1px 4px;
Border: 3px double #ffff;
+ Border-Color: # F60;
Contexte: # F60;
Couleur: #ffff;
}
.Pagination li.currentState, .currentState a, .currentState A: Hover {
Border-Color: #FFFF #CCC;
curseur: par défaut;
}
/ * Le style de pagination se termine * /
Méthode d'appel:
La copie de code est la suivante: page.Navigation ("pagenav", 100, 10, 1, "xxxlist");
<div id = "pagenav"> </div>
J'espère que cet article sera utile à la programmation JavaScript de tous.