Este artigo descreve o uso da ferramenta de paginação JS. Compartilhe para sua referência. O método de implementação específico é o seguinte:
JS Código Parte:
Copie o código da seguinte forma:/**
* Paginação JS
*/
Var Page;
(função(){
var página = {versão: "1.0", autor: "Liuxingmi"};
var ShowPage = 9;
Page.Navigation = function (Divid, TotalRecord, TotalPage, CurrentPage, Func) {
var NAV = '<UL Class =/"Paginação/" Title =/"Lista de Paginação/">';
Nav += '<li> Registros totais: <i id = "totalRecord">' +totalRecord +'</i> </li>';
Nav + = '<li> Contagem total de páginas: <i id = "totalpage">' + totalpage + '</i> </li>';
Nav + = '<li> Página atual: <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"> página anterior </a> </li> ';
} outro {
Nav + = '<li> <a href = "javascript:' + func + '(1);" id = "FirstPage"> home </a> </li> ';
Nav + = '<li> <a href = "javascript:' + func + '(' + (currentpage -1) + ');" id = "FrontPage"> página anterior </a> </li> ';
}
Nav += '<li id = "num"> <ol>';
var start = currentPage - Math.floor (ShowPage/2);
var end = currentPage + Math.floor (ShowPage/2);
if (end> totalpage) {
Iniciar - = (END - TOTALPAGE);
}
if (start <= 0) {
start = 1;
}
if (currentpage <showpage && end <showpage) {
end = showpage;
}
if (end> totalpage) {
end = totalpage;
}
para (var i = start; i <= end; i ++) {
if (i == currentpage) {
Nav + = '<li> <a href = "javascript:' + func + '(' + i + ');">' + i + '</a> </li>';
} outro {
Nav + = '<li> <a href = "javascript:' + func + '(' + i + ');">' + i + '</a> </li>';
}
}
Nav += '</ol> </li>';
if (currentpage == TotalPage) {
NAV += '<li> <a href = "javascript: void (0);" id = "NextPage"> última página </a> </li> ';
NAV += '<li> <a href = "javascript: void (0);" id = "lastpage"> última página </a> </i> ';
} outro {
Nav + = '<li> <a href = "javascript:' + func + '(' + (currentPage + 1) + ');" id = "NextPage"> última página </a> </li> ';
Nav + = '<li> <a href = "javascript:' + func + '(' + totalpage + ');" id = "lastpage"> última página </a> </i> ';
}
Nav += '</ul>';
$ ("#" + divid) .html (NAV);
};
this.page = página;
}) ();
Parte do CSS:
Copie o código da seguinte forma:/*O estilo de página inicia*/
.paginação{
estouro: oculto;
margem: 0 0 0 25px;
preenchimento: 10px 10px 6px 150px;
Top de borda: 1px Solid #C8C8C8;
_Zoom: 1;
Alinhamento de texto: centro;
}
.paginação *{
exibição: embutido;
flutuar: esquerda;
margem: 0;
preenchimento: 0;
tamanho de fonte: 12px;
}
.Paginação i {
flutuar: nenhum;
Right-right: 1px;
}
.CurrentPage B {
flutuar: nenhum;
Cor:#f00;
}
.Paginação li {
estilo de lista: nenhum;
margem: 0 5px;
}
.Paginação li li {
Posição: relativa;
margem: -2px 0 0;
Font-Family: Arial, Helvetica, Sans-Serif
}
.FirstPage A, .PreviousPage A, .NextPage A, .LASTPAGE A {
estouro: oculto;
altura: 0;
Indente de texto: -9999em;
Top de borda: 8px Solid #FFF;
Bottom de fronteira: 8px Solid #FFF;
}
.Paginação li l a {
margem: 0 1px;
preenchimento: 0 4px;
Fronteira: 3px duplo #ffff;
+cor de borda: #eee;
Antecedentes: #eee;
Cor:#06f;
Decoração de texto: Nenhum;
}
.Paginação Li li a: Passe {
Antecedentes:#f60;
cor de borda: #ffff;
+cor de borda:#f60;
Cor: #ffff;
}
li.firstpage {
margem-esquerda: 40px;
Border-Ift: 3px Solid #06F;
}
.FirstPage A, .PreviousPage A {
Right-Right: 12px Solid #06F;
}
.FirstPage A: Passe,.
cor-direita: #f60;
}
.NextPage A, .LASTPAGE A {
Border-Ift: 12px Solid #06F;
}
.NextPage A: Hover, .Lastpage A: Passe o mouse {
cor de borda-esquerda:#f60;
}
.Paginação li.lastpage {
Fronteira: 3px Solid #06F;
}
.Paginação li li.currentState a {
Posição: relativa;
margem: -1px 3px;
preenchimento: 1px 4px;
Fronteira: 3px duplo #ffff;
+cor de borda:#f60;
Antecedentes:#f60;
Cor: #ffff;
}
.Paginação li.currentState, .currentState a, .currentState a: pairar {
Border-cor: #ffff #ccc;
Cursor: padrão;
}
/*Estilo de paginação termina*/
Método de chamada:
A cópia do código é a seguinte: Page.navigation ("Pagenav", 100, 10, 1, "xxxlist");
<div id = "pagenav"> </div>
Espero que este artigo seja útil para a programação JavaScript de todos.