Un componente de paginación simple escrito por mí mismo, las principales funciones e implementaciones están en JS. Solo agregue un DIV para colocar la página para generar la paginación y dar la identificación del contenedor.
La estructura HTML es la siguiente:
La copia del código es la siguiente:
<ul id = "Pagediv">
</ul>
class = "Pagination" da el estilo de paginación,
id = "Pagediv" se usa para colocar la paginación generada por JS
La estructura CSS es la siguiente:
La copia del código es la siguiente:
.paginación{
margen-top: 10px;
margen-fondo: 10px;
Pantalla: bloque en línea;
ROLED-LAFUERA: 0;
margen: 20px 0;
Border-Radius: 4px;
}
.paginación> li {
Pantalla: en línea;
}
.pagination> li: First-Child> A {
margen-izquierda: 0;
border-top-izquierda-radio: 4px;
fronterizo-fondo-izquierda-radio: 4px;
}
.pagination> li> a {
Posición: relativo;
flotante: izquierda;
relleno: 6px 12px;
margen -izquierda: -1px;
Línea de altura: 1.42857143;
Color: #337AB7;
Decoración de texto: ninguna;
Color de fondo: #fff;
borde: 1px sólido #ddd;
cursor: puntero;
}
.paginación> li> a.navcur {
Antecedentes: #CCCCCCCC;
Color: #ffffff;
}
La siguiente es la estructura js, consulte jQuery
La copia del código es la siguiente:
/**
* @pageContentID renderizando el elemento div de la página
* @CurPage Página de inicio actual
* @totalcount número total
* @pagerows número de pantallas por página
* @Callback La función de devolución de llamada que muestra datos
*/
function pageList (pageContentId, opción) {
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 _elf = this;
_self._firstpage = document.createElement ("li");
_self._firstpagea = document.createElement ("A");
_self._firstpagea.innerhtml = "Página de inicio";
_self._firstpage.appendChild (_elf._firstpagea);
this.pageContentid.appendChild (_elf._firstpage);
_self._firstpage.onclick = function () {
_self.gotopage (1);
}
},
LastPage: function () {
var _elf = this;
_self._lastPage = document.createElement ("li");
_self._lastpagea = document.createElement ("A");
_self._lastpagea.innerhtml = "Última página";
_self._lastpage.appendChild (_elf._lastpagea);
this.pageContentid.AppendChild (_Self._LastPage);
_self._lastpage.onClick = function () {
_self.gotopage (_elf.pagesize);
}
},
putpage: function () {
var _elf = this;
_self._prew = document.createElement ("li");
_self._prewa = document.createElement ("A");
_self._prewa.innerhtml = "<<";
_self._prew.appendChild (_elf._prewa);
this.pageContentid.appendChild (_elf._prew);
_self._prew.onclick = function () {
if (_self.curpage> 1) {
_Self.Curpage--;
}
_self.callback.call (this, this.curpage);
_self.init ();
console.log (_elf.curpage);
}
},
nextPage: function () {
var _elf = 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 <_elf.pagesize) {
_Self.Curpage ++;
}
_self.callback.call (this, this.curpage);
_self.init ();
console.log (_elf.curpage);
}
},
pageno: function () {
var _elf = this;
if (this.pagesize <= 10) {
para (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 (_elf._numa);
this.pageContentid.appendChild (_elf._num);
_self._num.onclick = function () {
var curpage = $ (this) .Text ();
_self.gotopage (curpage);
}
}
}
demás{
if (_self.curpage <= 10) {
para (var i = 1; i <= 10; i ++) {
_self._num = document.createElement ("li");
_self._numa = document.createElement ("A");
_self._numa.innerhtml = i;
_self._num.appendChild (_elf._numa);
this.pageContentid.appendChild (_elf._num);
_self._num.onclick = function () {
var curpage = $ (this) .Text ();
_self.gotopage (curpage);
}
}
}
else if (_elf.curpage> 10 && _ self.curpage <= this.pagesize) {
if (this.pagesize <math.ceil (_elf.curpage/10)*10) {
for (var i = math.floor (_elf.curpage/10)*10+1; i <= this.pagesize; i ++) {
if (_self.curpage> this.pagesize)
devolver;
_self._num = document.createElement ("li");
_self._numa = document.createElement ("A");
_self._numa.innerhtml = i;
_self._num.appendChild (_elf._numa);
this.pageContentid.appendChild (_elf._num);
_self._num.onclick = function () {
var curpage = $ (this) .Text ();
_self.gotopage (curpage);
}
}
}demás{
if (math.ceil (_elf.curpage/10)*10 == _ self.curpage) {
para (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 (_elf._numa);
this.pageContentid.appendChild (_elf._num);
_self._num.onclick = function () {
var curpage = $ (this) .Text ();
_self.gotopage (curpage);
}
}
}demás{
for (var i = math.floor (_elf.curpage/10)*10+1; i <= math.ceil (_elf.curpage/10)*10; i ++) {
_self._num = document.createElement ("li");
_self._numa = document.createElement ("A");
_self._numa.innerhtml = i;
_self._num.appendChild (_elf._numa);
this.pageContentid.appendChild (_elf._num);
_self._num.onclick = function () {
var curpage = $ (this) .Text ();
_self.gotopage (curpage);
}
}
}
}
}
}
$ (". Pagination li"). Cada (function () {
if ($ (this) [0] .inntext == _ self.curpage) {
$ (". Pagination li"). Niños ("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);
},
renderbtn: functer () {
$ (". Pagination"). Html ("");
this.FirstPage ();
this.prewPage ();
this.pagenum ();
this.nextPage ();
this.lastPage ();
}
};
$ (function () {
var Pager = new PageList ("Pagediv", {
Curpage: 1,
TotalCount: 26,
Pageras: 1,
devolución de llamada: llamada de llamada
});
Pager.init ();
});
function CallbackFuc (curpage) {
}
ilustrar:
Esta página se basa en 10 páginas. Cuando es inferior a 10 páginas, se muestran todas las páginas. Cuando es más de 10 páginas, las páginas se giran para mostrar las páginas restantes.
Método de llamadas:
La copia del código es la siguiente:
$ (function () {
var Pager = new PageList ("Pagediv", {
Curpage: 1,
TotalCount: 26,
Pageras: 1,
devolución de llamada: llamada de llamada
});
Pager.init ();
});
Lo anterior es el código central de este componente de paginación. Espero que te pueda gustar.