Un composant de pagination simple écrit par moi-même, les principales fonctions et implémentations sont toutes dans JS. Ajoutez uniquement un div pour placer la page pour générer la pagination et donner l'ID du conteneur.
La structure HTML est la suivante:
La copie de code est la suivante:
<ul id = "pagediv">
</ul>
class = "pagination" donne le style de pagination,
id = "pagediv" est utilisé pour placer la pagination générée par JS
La structure CSS est la suivante:
La copie de code est la suivante:
.pagination{
marge: 10px;
marge-fond: 10px;
Affichage: bloc en ligne;
padding-gauche: 0;
marge: 20px 0;
Border-Radius: 4px;
}
.Pagination> li {
Affichage: en ligne;
}
.Pagination> li: premier enfant> a {
marge-gauche: 0;
Border-top-left-radius: 4px;
Border-Bottom-Left-Radius: 4px;
}
.Pagination> li> a {
Position: relative;
flottant: à gauche;
rembourrage: 6px 12px;
marge-gauche: -1px;
Heure de ligne: 1.42857143;
Couleur: # 337AB7;
Décoration du texte: aucune;
Color d'arrière-plan: #FFF;
Border: 1px solide #ddd;
curseur: pointeur;
}
.Pagination> li> a.navcur {
Contexte: #ccccccc;
Couleur: #ffffff;
}
Ce qui suit est la structure JS, veuillez vous référer à jQuery
La copie de code est la suivante:
/ **
* @PageContentid Rendre l'élément div de la page
* Page de démarrage actuelle @curpage
* @TotalCount Nombre total
* @Pagerows Nombre d'affichages par page
* @Callback La fonction de rappel qui affiche des données
* /
Fonction PageList (PageContentid, option) {
this.pageContentid = document.getElementById (PageContentid);
this.curpage = option.curpage;
this.totalCount = option.totalCount;
this.Pagerows = option.PagerOWS;
this.callback = option.callback;
this.pagesize = math.ceil (this.totalCount / this.Pagerows);
}
PageList.prototype = {
init: function () {
this.renderBtn ();
},
FirstPage: function () {
var _self = this;
_self._firstPage = document.CreateElement ("li");
_self._firstPagea = document.CreateElement ("A");
_self._firstpagea.innerhtml = "Homepage";
_self._firstpage.appendChild (_self._firstPagea);
this.pageContenTId.ApendChild (_self._firstpage);
_self._firstpage.onclick = function () {
_self.gotopage (1);
}
},
lastpage: function () {
var _self = this;
_self._lastPage = document.CreateElement ("li");
_self._lastpagea = document.CreateElement ("A");
_self._lastpagea.innerhtml = "Last Page";
_self._lastpage.appendChild (_self._lastpagea);
this.pageContenTId.ApendChild (_self._lastPage);
_self._lastpage.onclick = function () {
_self.gotopage (_self.pagesize);
}
},
putPage: function () {
var _self = this;
_self._prew = document.createElement ("li");
_self._Prewa = document.CreateElement ("A");
_self._prewa.innerhtml = "<<";
_self._prew.appendChild (_self._prewa);
this.pageContenTId.ApendChild (_self._prew);
_self._prew.onclick = function () {
if (_self.curpage> 1) {
_self.curpage--;
}
_self.callback.call (this, this.curpage);
_self.init ();
console.log (_self.curpage);
}
},
NextPage: function () {
var _self = this;
_self._next = document.createElement ("li");
_self._nexta = document.createElement ("a");
_self._nexta.innerhtml = ">>";
_self._next.appendChild (_self._nexta);
this.pageContenTId.ApendChild (_fel._next);
_self._next.onclick = function () {
if (_self.curpage <_self.pageSize) {
_self.curpage ++;
}
_self.callback.call (this, this.curpage);
_self.init ();
console.log (_self.curpage);
}
},
pagenum: function () {
var _self = this;
if (this.pagesize <= 10) {
pour (var i = 1, len = this.pagesize; i <= len; i ++) {
_self._num = document.createElement ("li");
_self._numa = document.createElement ("a");
_self._numa.innerhtml = i;
_self._num.appendChild (_self._numa);
this.pageContenSid.ApendChild (_self._num);
_self._num.onclick = function () {
var curpage = $ (this) .text ();
_self.gotopage (curpage);
}
}
}
autre{
if (_self.curpage <= 10) {
pour (var i = 1; i <= 10; i ++) {
_self._num = document.createElement ("li");
_self._numa = document.createElement ("a");
_self._numa.innerhtml = i;
_self._num.appendChild (_self._numa);
this.pageContenSid.ApendChild (_self._num);
_self._num.onclick = function () {
var curpage = $ (this) .text ();
_self.gotopage (curpage);
}
}
}
else if (_self.curpage> 10 && _ self.curpage <= this.pageSize) {
if (this.pageSize <math.ceil (_self.curpage / 10) * 10) {
pour (var i = math.floor (_self.curpage / 10) * 10 + 1; i <= this.pageSize; i ++) {
if (_self.curpage> this.pageSize)
retour;
_self._num = document.createElement ("li");
_self._numa = document.createElement ("a");
_self._numa.innerhtml = i;
_self._num.appendChild (_self._numa);
this.pageContenSid.ApendChild (_self._num);
_self._num.onclick = function () {
var curpage = $ (this) .text ();
_self.gotopage (curpage);
}
}
}autre{
if (math.ceil (_self.curpage / 10) * 10 == _ self.curpage) {
for (var i = _self.curpage-9; i <= _ self.curpage; i ++) {
_self._num = document.createElement ("li");
_self._numa = document.createElement ("a");
_self._numa.innerhtml = i;
_self._num.appendChild (_self._numa);
this.pageContenSid.ApendChild (_self._num);
_self._num.onclick = function () {
var curpage = $ (this) .text ();
_self.gotopage (curpage);
}
}
}autre{
pour (var i = math.floor (_self.curpage / 10) * 10 + 1; i <= math.ceil (_self.curpage / 10) * 10; i ++) {
_self._num = document.createElement ("li");
_self._numa = document.createElement ("a");
_self._numa.innerhtml = i;
_self._num.appendChild (_self._numa);
this.pageContenSid.ApendChild (_self._num);
_self._num.onclick = function () {
var curpage = $ (this) .text ();
_self.gotopage (curpage);
}
}
}
}
}
}
$ (". Pagination Li"). Chaque (fonction () {
if ($ (this) [0] .InnerText == _ self.curpage) {
$ (". Pagination Li"). Enfants ("A"). RemoveClass ("Navcur");
$ (this) .children ("a"). addClass ("navCur");
}
});
},
getOpage: function (curpage) {
this.curpage = curpage;
this.callback.call (this, this.curpage);
this.init ();
console.log (this.curpage);
},
rendebtn: function () {
$ (". Pagination"). Html ("");
this.firstpage ();
this.prewPage ();
this.pagenum ();
this.NextPage ();
this.lastPage ();
}
};
$ (function () {
var pager = new PageList ("pagedIv", {
Curpage: 1,
TotalCount: 26,
Pageres: 1,
rappel: callbackfuc
});
pager.init ();
});
function callbackfuc (curpage) {
}
illustrer:
Cette page est basée sur 10 pages. Lorsqu'il est inférieur à 10 pages, toutes les pages sont affichées. Lorsqu'il est supérieur à 10 pages, les pages sont tournées pour afficher les pages restantes.
Méthode d'appel:
La copie de code est la suivante:
$ (function () {
var pager = new PageList ("pagedIv", {
Curpage: 1,
TotalCount: 26,
Pageres: 1,
rappel: callbackfuc
});
pager.init ();
});
Ce qui précède est le code central de ce composant de pagination. J'espère que vous pouvez l'aimer.