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 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
En el siguiente recuadro se muestra el código completo con los comentarios de algunas lineas para entender las funciones principales.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
function pinta(num,inicio){//función creada por Jorge Zazo de la Encarnación http://www.forosdelweb.com/1201706-post4.html //Modificaciones Ariel Oliva arieloliva.com var pagNow = inicio; var limSup; var numPaginasFSt = ""; var DatoI; var DatoF; var pagAnt; var pagSig; var rutaIma=""; //Ruta base de las imagenes var numPaginas = misDatos.length /num; //Detecto el número "entero" de páginas numPaginas = numPaginas.toString(); numPaginas = numPaginas.split("."); numPaginasF = eval(numPaginas[0]); if (misDatos.length % num != 0){ //Si el resultado de la división anterior no es exacto le añado manualmente una página más numPaginasF ++; } if((pagNow + 1) != numPaginasF){//Establezco el número de datos a mostrar si la última página no tiene el mismo número de datos limSup = -1; } else { limSup = (misDatos.length - (numPaginasF * num))-1; } DatoI = pagNow * num;//Establezco el dato inicial y el dato final de la paginación DatoF = DatoI + (num+limSup); if (pagNow == 0){//Establezco cual es la página anterior y la siguiente pagAnt = 0; } else { pagAnt = pagNow - 1; } if (pagNow == (numPaginasF-1)){ pagSig = pagNow; } else { pagSig = pagNow + 1; } for (i=0;i<numPaginasF;i++){//Pinto la cadena con el número de páginas y sus correspondientes enlaces numPaginasFSt += "<a>"+ (i+1) +"</a> "; } if (primera == 0){//Establezco si es la primera vez que se crean los elementos 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]("+rutaIma+"btnPri.jpg)
» +»![Anterior]("+rutaIma+"btnAnt.jpg)
» + numPaginasFSt +»![Siguiente]("+rutaIma+"btnSig.jpg)
» +»![Ultimo]("+rutaIma+"btnUlt.jpg)
«; 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 += »
» +» » + numPaginasFSt +» » +» «; } } 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script language="javascript" type="text/javascript"> var primera = 0; var misDatos = new Array(); function datos(dato1,dato2,dato3,dato4){ this.dato1 = dato1; this.dato2 = dato2; this.dato3 = dato3; this.dato4 = dato4; } var encabeza = new Array("Seleccion","Tipo Plantilla","Plantilla","Producto"); misDatos[0] = new datos("sds0","hgh","ghg","dd"); misDatos[1] = new datos("dsd1","ghg","hgh","tyt"); misDatos[2] = new datos("ffg2","ghg","ghg","tyt"); misDatos[3] = new datos("dfd3","hgg","ghg","tyt"); misDatos[4] = new datos("fdf4","ghg","ghg","df"); misDatos[5] = new datos("fdf5","hgg","ghg","ghg"); misDatos[6] = new datos("fdf6","ghg","ghg","ghg"); misDatos[7] = new datos("fdf7","ggh","ghg","ghg"); </script> |
|
1 |
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
Ahora si se ve el codigo
Un comentarios para que no este tan solo.
Excelente contribucion gracias en verdad
Buena explicación
Gracias