El dia de hoy regreso con un pequeño ejemplo para hacer un paginador en javascript, es una version editada de un ejemplo que encontre hace tiempo pero no recuerdo la pagina jejejeje.
Empesamos creando un pequeño archivo .js que llamare paginador...
//creamos una funcion que se llamara Pager que recibira el nombre de la tabla,
//y la cantidad de registros seran presentados por paginador
//y finalmente que contendra 7 variables
function Pager(tableName, itemsPerPage) {
this.tableName = tableName; // se asigna el nombre de la tabla al objeto
this.itemsPerPage = itemsPerPage; // se asigna el numero de registros
this.currentPage = 1; //indicamos cual es la pagina que presentaremos inicialmente
this.pages = 0;//aun no sabemos cuantas paginas seran, por tanto lo declaramos a 0
this.inited = false;//idicamos si ya inicio la tabla o no
this.divisores = 0;//aun no sabemos la cantidad de divisores por eso la declaramos a cero
this.cantidadDivs=5;//cantidad de divisores a mostrar por paginador
}
/**la variable divisores y cantidadDivs, son referencia a que mostraremos paginadores de 5 en 5,
por ejemplo si tenemos 120 registros y los mostraremos de 10 en 10, con la variable divisores indicamos que mostraremos 5 divisores,
es decir, mostraremos el paginador 1(registros 1-10), paginador 2(registros 11,20).. asi hasta el paginador 5(registros 41-50),
y cuando le demos siguiente, se mostraran los paginadores 6 al 10 ( registros 51-100,
separados en su respectivo paginador )*
Dentro de nuestra funcion crearemos una sub-funcion llamada init
this.init = function() {
var rows = document.getElementById(tableName).rows;
var records = (rows.length - 1);
this.pages = Math.ceil(records / itemsPerPage);
this.divisores = Math.ceil( this.pages / this.cantidadDivs );
this.inited = true;
}
/**
obtenemos la cantidad de registos que contiene la tabla.
obtenemos la cantidad de registos, recordemos que las numeraciones empiesan en 0, para el caso de la variable rows.
obtenemos el numero de paginas que mostraremos.
obtenemos el numero de divisores que tendremos
( recordemos que es como un agrupador para los paginadores )
colocamnos la variable inicializado como cierto
*/
Creamos nuestra funcion para poder mostrar los registros
this.showRecords = function(from, to) {
var rows = document.getElementById(tableName).rows;
for (var i = 1; i < rows.length; i++) {
if (i < from || i > to)
rows[i].style.display = 'none';
else
rows[i].style.display = '';
}
}
/**
El metodo recibe el rango de registros, y lo unico que hace es colocar
o borrar el estilo, en su apartado display a "none"
*/
Creamos nuestra funcion para poder mostrar los divisores
this.showDivs = function(pageNumber){
var divisorMostrar = Math.ceil(pageNumber / this.cantidadDivs);
for( var i = 1 ; i <= this.divisores ; i++ ){
if( divisorMostrar == i ){
document.getElementById('dv'+i).style.display = '';
}else{
document.getElementById('dv'+i).style.display = 'none';
}
}
}
/**
obtenemos el id del agrupador de divisores,
e igual agregamos o borramos el estilo display
por ahora no se preocupen por los ids, esos los veremos mas adelante
*/
Creamos nuestra funcion para poder mostrar un paginadorthis.showPage = function(pageNumber) {
if (! this.inited) {
alert("La tabla no se inicializo");
return;
}
this.showDivs(pageNumber);
this.currentPage = pageNumber;
var from = (pageNumber - 1) * itemsPerPage + 1;
var to = from + itemsPerPage - 1;
this.showRecords(from, to);
}
/**
este metodo recibe su el id del paginador a mostrar
pero primero valida que la tabla este inicializada, para no mandar un error javascript
invocamos el metodo que mostrara los divs, y calculamos los registros que se han de mostrar
*/
Creamos los metodos que invocaran nuestros botones
this.prev = function() {
if (this.currentPage > 1)
this.showPage(this.currentPage - 1);
}
this.first = function() {
if (this.currentPage > 1)
this.showPage( 1 );
}
this.next = function() {
if (this.currentPage < this.pages) {
this.showPage(this.currentPage + 1);
}
}
this.last = function() {
if (this.currentPage < this.pages) {
this.showPage(this.pages);
}
}
/**
Son los metodos de los botones primero, anterior, siguiente, ultimo
*/
Creamos el metodo principal que asignara ids a divisores a paginadores,
this.showPageNav = function(pagerName, positionId) {
if (! this.inited) {
alert("La tabla no esta inicializada");
return;
}
var element = document.getElementById(positionId);
var pagerHtml = ' inicio ';
pagerHtml += ' anterior ';
var divisor = 1;
var idDivisor = 1;
for (var page = 1; page <= this.pages; page++) {
if( idDivisor==1 ){
pagerHtml += '
';
}
idDivisor = idDivisor+1;
pagerHtml += '' + page + '';
if(idDivisor==this.cantidadDivs+1){
idDivisor=1;
divisor=divisor+1
pagerHtml += '
';
}else if( page == this.pages ){
pagerHtml += '
';
}
}
pagerHtml += ' siguiente ';
pagerHtml += ' fin ';
element.innerHTML = pagerHtml;
}
/**
verificamos que la tabla este inicializada.
recorremos las paginas calculadas anteriormente asignandole ids, la funcion onclick
finalmente todo ese codigo lo asignamos a una variable que es la encargada de pintar el html en nuestra pagina
*/
Solo nos resta invocar el codigo en nuestro html
recuerden colocar el
| Nombre | Apellido | Edad |
|---|---|---|
| Pruebas | Java | Limos |
Como ven no es tan dificil agregar un navegador simple, la parte de estilos ya les corresponde y si tienen comentarios u otra cosa se los agradecere
