Este artículo describe el uso de la herramienta de paginación JS. Compártelo para su referencia. El método de implementación específico es el siguiente:
parte del código JS:
Copie el código de la siguiente manera:/**
* Pagination JS
*/
página var;
(función(){
var página = {versión: "1.0", autor: "liuxingmi"};
var showpage = 9;
Page.navigation = function (divid, totalrecord, totalpage, currentPage, func) {
var nav = '<ul class =/"Pagination/" title =/"Pagination List/">';
Nav += '<li> Records totales: <i id = "TotalRecord">' +TotalRecord +'</i> </li>';
Nav + = '<li> Total Page Count: <i id = "TotalPage">' + TotalPage + '</i> </li>';
Nav + = '<li> Página actual: <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> ';
} demás {
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) {
inicio - = (final - TotalPage);
}
if (inicio <= 0) {
inicio = 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>';
} demás {
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> ';
} demás {
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 = Page;
}) ();
Parte de CSS:
Copie el código de la siguiente manera:/*El estilo de página inicia*/
.paginación{
desbordamiento: oculto;
margen: 0 0 0 25px;
relleno: 10px 10px 6px 150px;
Border-Top: 1px Solid #C8C8C8;
_zoom: 1;
Text-Align: Center;
}
.paginación *{
Pantalla: en línea;
flotante: izquierda;
margen: 0;
relleno: 0;
tamaño de fuente: 12px;
}
.pagination i {
flotante: ninguno;
Right-Right: 1px;
}
.CurrentPage B {
flotante: ninguno;
Color:#F00;
}
.pagination li {
Estilo de lista: Ninguno;
margen: 0 5px;
}
.pagination li li {
Posición: relativo;
margen: -2px 0 0;
Font-Family: Arial, Helvetica, Sans-Serif
}
.FirstPage A,.
desbordamiento: oculto;
Altura: 0;
TEXT-INDENT: -9999EM;
Border-top: 8px sólido #fff;
Border-Bottom: 8px sólido #fff;
}
.pagination li li a {
margen: 0 1px;
relleno: 0 4px;
borde: 3px doble #ffff;
+Color de la frontera: #EEE;
Antecedentes: #EEE;
Color:#06F;
Decoración de texto: ninguna;
}
.pagination li li a: hover {
Antecedentes:#F60;
color de borde: #ffff;
+color de borde:#F60;
Color: #ffff;
}
Li.FirstPage {
margen izquierda: 40px;
Border-izquierda: 3px Solid #06F;
}
.FirstPage a, .previousPage a {
Border-Right: 12px Solid #06F;
}
.FirstPage A: Hover, .PreviousPage A: Hover {
Border-derecho-color: #F60;
}
.nextpage a, .lastpage a {
Border-izquierda: 12px Solid #06F;
}
.NextPage A: Hover, .lastPage A: Hover {
Color de la izquierda fronteriza:#F60;
}
.pagination li.lastpage {
Border-Right: 3px Solid #06F;
}
.paginación li li li.currentstate a {
Posición: relativo;
margen: -1px 3px;
relleno: 1px 4px;
borde: 3px doble #ffff;
+color de borde:#F60;
Antecedentes:#F60;
Color: #ffff;
}
.pagination li.CurrentState, .CurrentState A, .CurrentState A: Hover {
color de borde: #ffff #ccc;
cursor: predeterminado;
}
/*El estilo de paginación termina*/
Método de llamadas:
La copia del código es la siguiente: Page.navigation ("Pagenav", 100, 10, 1, "xxxlist");
<div id = "pagenav"> </div>
Espero que este artículo sea útil para la programación de JavaScript de todos.