Paginador javascript

  Este Post describe el código en JavaScript para realiza el paginado de datos, tomados desde un arreglo. Las siguientes imágenes muestra como se vera al ejecutarlo.

Paginador
Paginador

 

Paginador 2
Paginador 2

Es una modificación que realice a partir de un código de Jorge Zazo de la Encarnación, el cual también se incluye en el paquete de ejemplo que se puede descargar al final del Post.

Paginador Original
Paginador Original

En el siguiente recuadro se muestra el código completo con los comentarios de algunas lineas para entender las funciones principales.

«; for (i=0;i<encabeza.length;i++){//crea cabeceras cadena = cadena + «»; } cadena = cadena + «»; for (DatoI;DatoI<=DatoF;DatoI++){//Pinto todos los elementos con cada dato… cadena = cadena + «» for(j=1;j<=encabeza.length;j++){ var obtDatos = «misDatos[DatoI].dato»+j; cadena = cadena + «»; } cadena = cadena + «» } cadena = cadena + »

 «+encabeza[i]+»
 «+eval(obtDatos) + «

«; contenido.innerHTML = cadena; var pagina = document.createElement(«span»);//… y la paginación. document.getElementById(«paginacion»).appendChild( pagina); paginacion.innerHTML += »
Primero » +»Anterior » + numPaginasFSt +»Siguiente » +»Ultimo «; primera = 1; } else { borra();//Borro las capas ya pintadas en la primera vez var creo = document.createElement(«span»); document.getElementById(«contenido»).appendChild(creo); var cadena = »

«; for (i=0;i<encabeza.length;i++){//crea cabeceras cadena = cadena + «»; } cadena = cadena + «»; for (DatoI;DatoI<=DatoF;DatoI++){//Pinto todos los elementos con cada dato… cadena = cadena + «» for(j=1;j<=encabeza.length;j++){ var obtDatos = «misDatos[DatoI].dato»+j; cadena = cadena + «»; } cadena = cadena + «» } cadena = cadena + »

 «+encabeza[i]+»
 «+eval(obtDatos) + «

«; contenido.innerHTML = cadena; var pagina = document.createElement(«span»);//… y la paginación. document.getElementById(«paginacion»).appendChild( pagina); paginacion.innerHTML += »
Primero » +»Anterior » + numPaginasFSt +»Siguiente » +»Ultimo «; } } function borra(){ contenido.innerHTML = «»; paginacion.innerHTML = «»; }

 

Para la llamada a la función, primeramente creamos la función «datos«, en la cual pasamos como parámetros la cantidad de columnas que existirán. En la variable «encabeza» agregamos el titulo de cada columna. En el arreglo «misDatos» cargamos los valores con un indice que ira creciendo de acuerdo a la cantidad de registros que deseemos. En el cuerpo del documento deberán existir los div «contenido» y «paginacion«. Finalmente se hace el llamado a la función «pinta(param1,param2)«, donde «param1» es la cantidad de registros que se mostraran por hoja y «param2» es la pagina+1 que se mostrara al cargar el paginador, por ejemplo para que se muestre inicialmente la primera pagina el parámetro deberá valer 0.

Paginación en local

 

 

En el siguiente enlace se muestra todo el código, solo se tiene que descomprimir y ejecutar el archivo este-paginadorJavaScript.html en un Explorardor web. eseste-paginadorJavaScript.rar

4 comentarios

Deja un comentario