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

Categories: JavaScript, Programacion

4 Responses so far.

  1. ariel dice:

    Ahora si se ve el codigo

  2. ariel dice:

    Un comentarios para que no este tan solo.

  3. lucas lopez dice:

    Buena explicación

    Gracias

Leave a Reply


Orígenes de Datos SQL Server en WebLogic

Contenido1 Orígenes de Datos1.1 Configurar Jtds1.2 Configurar Driver propio de […]

Instalar Weblogic 12

Contenido1 Descargar2 Instalar2.1 Instalar WebLogic2.2 Configurar dominio3 Validar instalación y […]

API REST 5. Hypermedia

Contenido1 Introducción2 Programar hypermedia2.1 Crear Entity2.1.1 PersonaHateoas2.1.2 GrupoHateoas2.1.3 PaisHateoas2.2 Crear […]

API REST 4. Calidad al implementar aplicacion Web

Contenido1 Introducción1.1 Nivel 1. Uso correcto de URIs1.2 Nivel 2. […]

API REST 3. Publicar y consumir

Contenido1 Descripción2 Publicar y Consumir2.1 Usando CRUD2.1.1 Crear Persona2.1.2 Consultar […]