9 octubre, 2012 | ArielOlivaArielOliva

Con la evolución de la Tecnología, las formas de comunicación se han democratizado, es decir cada vez es más común que cualquier persona que tenga alguna idea que desea compartir, con unos cuantos pasos se puede dar a conocer hasta los confines del mundo. Con muy poco de inversión -Casi siempre de solamente tiempo- se puede difundir información a todo el mundo de forma sencilla y gratuita.

Un Blog es una bitácora que se escribe de forma periódica y lo más interesante es que los autores escriben y los lectores comentan, de tal forma que se establece un dialogo entre ambos para intercambiar diversas posiciones.

Todos tenemos algo que contar aunque sean ideas simples y comunes es muy probable que alguien de las millones de personas que tendrán la posibilidad de ver nuestras publicaciones les sirva. Que estas no se queden con nosotros, hagamos uso de la tecnología para mostrarles al mundo nuestras ideas. Ademas creo que es sumamente importante para los que nos dedicamos a las áreas de Sistemas tener un prestigio en la red que les indique a los posibles cliente nuestras capacidades.

Desde mi experiencia es complicado evaluar un desarrollador en base a una entrevista o examen psicometrico, porque no sabes si en ese momento esta pasado por un problema importante o al contrario alguien le comento o leyó como debe comportarse en una entrevista de trabajo y le resulta perfecta. La única forma de conocer el desempeño de una persona es trabajar con el varias semanas o hasta meses. Y que tal si vemos que esa persona tiene un prestigio en la red, con artículos, cursos, materiales de apoyo, Blog, seguidores… Da muchos elementos para tener mas certidumbre de su trabajo.

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.

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 += ""+ (i+1) +" ";
	}

	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 » +» 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 = »

«+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

L	M	X	J	V	S	D
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

ArielOliva

Blog de Ariel Oliva

Archivo por días: 9 octubre, 2012

¿Porqué un Blog?

Paginador javascript