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

«; contenido.innerHTML = cadena; var pagina = document.createElement(«span»);//… y la paginación. document.getElementById(«paginacion»).appendChild( pagina); paginacion.innerHTML += »
» +» » + numPaginasFSt +» » +» «; 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 + »

«; 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 = «»; }