Um componente de paginação simples escrito por mim, as principais funções e implementações são todas no JS. Adicione apenas uma div para colocar a página para gerar a paginação e fornecer o ID do contêiner.
A estrutura HTML é a seguinte:
A cópia do código é a seguinte:
<ul id = "pagediv">
</ul>
class = "paginação" dá o estilo de paginação,
id = "pagediv" é usado para colocar a paginação gerada por JS
A estrutura CSS é a seguinte:
A cópia do código é a seguinte:
.paginação{
Margin-top: 10px;
Margin-Bottom: 10px;
Exibição: bloco embutido;
preenchimento-esquerda: 0;
margem: 20px 0;
Radio de fronteira: 4px;
}
.Paginação> li {
exibição: embutido;
}
.Paginação> Li: Primeiro filho> A {
margem-esquerda: 0;
Radio de borda-top-esquerda: 4px;
Radio de borda-de-borda-esquerda: 4px;
}
.paginação> li> a {
Posição: relativa;
flutuar: esquerda;
preenchimento: 6px 12px;
margem -esquerda: -1px;
altura de linha: 1.42857143;
Cor: #337AB7;
Decoração de texto: Nenhum;
Background-Color: #FFF;
Fronteira: 1px sólido #DDD;
Cursor: Ponteiro;
}
.paginação> li> a.navcur {
Antecedentes: #ccccccc;
Cor: #ffffff;
}
A seguir, a estrutura JS, consulte o jQuery
A cópia do código é a seguinte:
/**
* @PageContentId renderizando o elemento div da página
* @curpage atual página inicial
* @TotalCount Número total
* @PageSows Número de displays por página
* @Callback A função de retorno de chamada que exibe dados
*/
função pagelist (pageContentId, opção) {
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.pageS);
}
Pagelist.prototype = {
init: function () {
this.renderBtn ();
},
FirstPage: function () {
var _elf = 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 _elf = this;
_self._lastpage = document.createElement ("li");
_self._lastPagea = document.createElement ("a");
_self._lastpagea.innerhtml = "última página";
_self._lastpage.appendChild (_self._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 (_self._prewa);
this.pageContentId.appendChild (_self._prew);
_self._prew.OnClick = function () {
if (_self.curpage> 1) {
_self.curpage--;
}
_self.callback.call (this, this.curpage);
_elf.init ();
console.log (_self.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 <_self.pagesize) {
_self.curpage ++;
}
_self.callback.call (this, this.curpage);
_elf.init ();
console.log (_self.curpage);
}
},
pagenum: function () {
var _elf = this;
if (this.pagesize <= 10) {
for (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 (Curpage);
}
}
}
outro{
if (_self.curpage <= 10) {
for (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 (Curpage);
}
}
}
caso contrário, se (_self.curpage> 10 && _ self.curpage <= this.pagesize) {
if (this.pagesize <math.ceil (_self.curpage/10)*10) {
for (var i = math.floor (_self.curpage/10)*10+1; i <= this.pagesize; i ++) {
if (_self.curpage> this.pagesize)
retornar;
_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 (Curpage);
}
}
}outro{
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.pageContentId.appendChild (_self._num);
_self._num.OnClick = function () {
var curpage = $ (this) .Text ();
_self.Gotopage (Curpage);
}
}
}outro{
for (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 (Curpage);
}
}
}
}
}
}
$ (". Paginação li"). Cada (function () {
if ($ (this) [0] .innerText == _ self.curpage) {
$ (". Paginação li"). crianças ("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: function () {
$ (". Paginação"). html ("");
this.firstpage ();
this.PrewPage ();
this.pagenum ();
this.NextPage ();
this.Lastpage ();
}
};
$ (function () {
var pager = new Pagelist ("Pagediv", {
Curpagem: 1,
TotalCount: 26,
PageRows: 1,
Retorno de chamada: CallbackFuc
});
pager.init ();
});
função callbackfuc (curpage) {
}
ilustrar:
Esta página é baseada em 10 páginas. Quando é inferior a 10 páginas, todas as páginas são exibidas. Quando é superior a 10 páginas, a página é girada para exibir as páginas restantes.
Método de chamada:
A cópia do código é a seguinte:
$ (function () {
var pager = new Pagelist ("Pagediv", {
Curpagem: 1,
TotalCount: 26,
PageRows: 1,
Retorno de chamada: CallbackFuc
});
pager.init ();
});
O acima é o código principal deste componente de paginação. Eu espero que você possa gostar.