Die Hauptfunktionen und Implementierungen sind eine einfache Paging -Komponente, die alle in JS sind. Fügen Sie nur eine DIV hinzu, um die Seite zu platzieren, um den Paging zu erzeugen, und geben Sie die ID des Containers an.
Die HTML -Struktur lautet wie folgt:
Die Codekopie lautet wie folgt:
<ul id = "pagediv">
</ul>
Klasse = "Pagination" gibt den Paginierungsstil,
ID = "PAGEDIV" wird verwendet, um die JS-generierte Pagination zu platzieren
Die CSS -Struktur lautet wie folgt:
Die Codekopie lautet wie folgt:
.Pagination{
Rand: 10px;
Randboden: 10px;
Anzeige: Inline-Block;
Padding-Links: 0;
Rand: 20px 0;
Border-Radius: 4px;
}
.Pagination> li {
Anzeige: Inline;
}
.Pagination> li: Erstkind> a {
Rand-Links: 0;
Border-Top-Links-Radius: 4px;
Border-Bottom-Links-Radius: 4px;
}
.Pagination> li> a {{
Position: Relativ;
float: links;
Polsterung: 6px 12px;
Rand -Links: -1px;
Linienhöhe: 1.42857143;
Farbe: #337ab7;
Textdekoration: Keine;
Hintergrundfarbe: #fff;
Grenze: 1PX Solid #ddd;
Cursor: Zeiger;
}
.Pagination> li> a.navcur {
Hintergrund: #CCCCCCC;
Farbe: #ffffff;
}
Das Folgende ist die JS -Struktur. Siehe JQuery
Die Codekopie lautet wie folgt:
/**
* @pageContentid rendert das Divelelement der Seite
* @curpage Current Start Seite
* @totalcount Gesamtzahl
* @pagerows Anzahl der Anzeigen pro Seite
* @callback Die Rückruffunktion, in der Daten angezeigt werden
*/
Funktion 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.AppendChild (_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 = "letzte Seite";
_self._Lastpage.AppendChild (_self._lastpagea);
this.pageContentID.AppendChild (_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.AppendChild (_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.AppendChild (_self._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) {
für (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.pageContentid.AppendChild (_self._num);
_self._num.onclick = function () {
var curpage = $ (this) .Text ();
_self.gotopage (kurpage);
}
}
}
anders{
if (_self.curpage <= 10) {
für (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.pageContentid.AppendChild (_self._num);
_self._num.onclick = function () {
var curpage = $ (this) .Text ();
_self.gotopage (kurpage);
}
}
}
else if (_self.curpage> 10 && _ self.curpage <= this.pageSize) {
if (this.PageSize <math.ceil (_self.curpage/10)*10) {
für (var i = math.floor (_self.curpage/10)*10+1; i <= this.pageSize; i ++) {
if (_self.curpage> this.PageSize)
zurückkehren;
_self._num = document.createelement ("li");
_self._numa = document.createElement ("a");
_self._numa.innerhtml = i;
_self._num.appendchild (_self._numa);
this.pageContentid.AppendChild (_self._num);
_self._num.onclick = function () {
var curpage = $ (this) .Text ();
_self.gotopage (kurpage);
}
}
}anders{
if (math.ceil (_self.curpage/10)*10 == _ self.curpage) {
für (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.pageContentid.AppendChild (_self._num);
_self._num.onclick = function () {
var curpage = $ (this) .Text ();
_self.gotopage (kurpage);
}
}
}anders{
für (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.pageContentid.AppendChild (_self._num);
_self._num.onclick = function () {
var curpage = $ (this) .Text ();
_self.gotopage (kurpage);
}
}
}
}
}
}
$ (". Pagination li"). Jede (function () {
if ($ (this) [0] .Innertext == _ self.curpage) {
$ (". Pagination li"). Kinder ("a"). removeclass ("navcur");
$ (this) .Children ("a"). AddClass ("navcur");
}
});
},
Getopage: Funktion (Kurpage) {
this.curpage = curpage;
this.callback.call (this, this.curpage);
this.init ();
console.log (this.curpage);
},
renderBtn: function () {
$ (". Pagination"). Html ("");
this.firstpage ();
this.prewpage ();
this.pagenum ();
this.NextPage ();
this.lastpage ();
}
};
$ (function () {
var pager = neuer pagelist ("pagediv", {
Kurpage: 1,,
Totalcount: 26,
Pagerows: 1,,
Rückruf: Callbackfuc
});
pager.init ();
});
Funktion Callbackfuc (Curpage) {
}
veranschaulichen:
Diese Seite basiert auf 10 Seiten. Wenn es niedriger als 10 Seiten ist, werden alle Seiten angezeigt. Wenn es größer als 10 Seiten ist, werden die Seiten gedreht, um die verbleibenden Seiten anzuzeigen.
Aufrufmethode:
Die Codekopie lautet wie folgt:
$ (function () {
var pager = neuer pagelist ("pagediv", {
Kurpage: 1,,
Totalcount: 26,
Pagerows: 1,,
Rückruf: Callbackfuc
});
pager.init ();
});
Das obige ist der Kerncode dieser Paging -Komponente. Ich hoffe es kann dir gefallen.