Paginación con javascript

Anice · #1 (**permalink**) 10/10/2004, 04:49

Quisiera saber como hacer una paginación de una sección de mi página web, en principio mi hosting me permite sólo el uso de básico de html, js y no se si algo más.
Lo que me gustaría hacer es lo siguiente:
En alguna de la secciónes como "Noticias", a lo largo del tiempo la hoja puede llegar a ser muy larga de modo que quisiera poder dividirla y paginarla de modo que lo último estuviese en la primera página y así sucesivamente. Quisiera poder dar un largo determinado a la hoja y que si sobrepasa ese largo se genere otra página con los links el nº de pagina ó next en cada una de ellas.
Espero haberme explicado más ó menos bien, y que alguien me pueda ayudar.

Gracias.

caricatos · #2 (**permalink**) 10/10/2004, 07:50

Hola Anice, bienvenido a los foros

:

Lo que planteas se suele hacer con bases de datos y programas que se ejecutan en el servidor.
Con javascript, lo único que puedes hacer es generar capas (nunca páginas) y podrías mostrarlas y ocultarlas con botones y estilos (display block/none)
Mi galería de caricaturas se genera de esa manera (puedes fijarte en mi perfil).
Otra alternativa es que hicieras páginas sueltas a mano (bueno, puedes usar algún editor...

) y fabricarte esos enlaces.

Saludos

Anice · #3 (**permalink**) 10/10/2004, 08:48

Gracias Caricatos,
Ya me imaginaba que pasaría algo de eso. Bueno voy a ver si me entero un poco de como has hecho la sección que me dices.

jorgezazo · #4 (**permalink**) 02/08/2005, 01:37

Hola Anice, precisamente yo me he enfrentado a un problema parecido, y creo que lo he medio resuelto a falta de solucionar la representación final de los datos. Mira, te paso el código para que lo veas

<html>
<script>

var misDatos = new Array();
//Creo el objeto que contendrá los datos de cada registro
function datos(nombre,apellidos,edad){

this.nombre = nombre;
this.apellidos = apellidos;
this.edad = edad;
}

misDatos[0] = new datos("Alicia0","Pérez","27");
misDatos[1] = new datos("Alicia1","Pérez","27");
misDatos[2] = new datos("Alicia2","Pérez","27");
misDatos[3] = new datos("Alicia3","Pérez","27");
misDatos[4] = new datos("Alicia4","Pérez","27");
misDatos[5] = new datos("Alicia5","Pérez","27");
misDatos[6] = new datos("Alicia6","Pérez","27");
misDatos[7] = new datos("Alicia7","Pérez","27");
misDatos[8] = new datos("Alicia8","Pérez","27");
misDatos[9] = new datos("Alicia9","Pérez","27");
misDatos[10] = new datos("Alicia10","Pérez","27");
misDatos[11] = new datos("Alicia11","Pérez","27");
misDatos[12] = new datos("Alicia12","Pérez","27");
misDatos[13] = new datos("Alicia13","Pérez","27");
misDatos[14] = new datos("Alicia14","Pérez","27");
misDatos[15] = new datos("Alicia15","Pérez","27");
misDatos[16] = new datos("Alicia16","Pérez","27");
misDatos[17] = new datos("Alicia17","Pérez","27");
misDatos[18] = new datos("Alicia18","Pérez","27");
misDatos[19] = new datos("Alicia19","Pérez","27");
misDatos[20] = new datos("Alicia20","Pérez","27");
misDatos[21] = new datos("Alicia21","Pérez","27");
misDatos[22] = new datos("Alicia22","Pérez","27");
misDatos[23] = new datos("Alicia23","Pérez","27");
misDatos[24] = new datos("Alicia24","Pérez","27");
misDatos[25] = new datos("Alicia25","Pérez","27");
misDatos[26] = new datos("Alicia26","Pérez","27");
misDatos[27] = new datos("Alicia27","Pérez","27");
misDatos[28] = new datos("Alicia28","Pérez","27");
misDatos[29] = new datos("Alicia29","Pérez","27");
misDatos[30] = new datos("Alicia30","Pérez","27");
misDatos[31] = new datos("Alicia31","Pérez","27");
misDatos[32] = new datos("Alicia32","Pérez","27");
misDatos[33] = new datos("Alicia33","Pérez","27");
misDatos[34] = new datos("Alicia34","Pérez","27");
misDatos[35] = new datos("Alicia35","Pérez","27");
misDatos[36] = new datos("Alicia36","Pérez","27");
misDatos[37] = new datos("Alicia37","Pérez","27");
misDatos[38] = new datos("Alicia38","Pérez","27");
misDatos[39] = new datos("Alicia39","Pérez","27");
misDatos[40] = new datos("Alicia40","Pérez","27");
misDatos[41] = new datos("Alicia41","Pérez","27");
misDatos[42] = new datos("Alicia42","Pérez","27");
misDatos[43] = new datos("Alicia43","Pérez","27");
misDatos[44] = new datos("Alicia44","Pérez","27");
misDatos[45] = new datos("Alicia45","Pérez","27");
misDatos[46] = new datos("Alicia46","Pérez","27");
misDatos[47] = new datos("Alicia47","Pérez","27");
misDatos[48] = new datos("Alicia48","Pérez","27");

var primera = 0;

function pinta(num,inicio){//función creada por Jorge Zazo de la Encarnación

var pagNow = inicio;
var limSup;
var numPaginasFSt = "";
var DatoI;
var DatoF;
var pagAnt;
var pagSig;

//Detecto el número "entero" de páginas
var numPaginas = misDatos.length /num;
numPaginas = numPaginas.toString();
numPaginas = numPaginas.split(".");
numPaginasF = eval(numPaginas[0]);

//Si el resultado de la división anterior no es exacto le añado manualmente una página más
if (misDatos.length % num != 0){numPaginasF ++}

//Establezco el número de datos a mostrar si la última página no tiene el mismo número de datos
if((pagNow + 1) != numPaginasF){limSup = -1} else {limSup = (misDatos.length - (numPaginasF * num))-1}

//Establezco el dato inicial y el dato final de la paginación
DatoI = pagNow * num;
DatoF = DatoI + (num+limSup);

//Establezco cual es la página anterior y la siguiente
if (pagNow == 0){pagAnt = 0} else {pagAnt = pagNow - 1}
if (pagNow == (numPaginasF-1)){pagSig = pagNow} else {pagSig = pagNow + 1}

//Pinto la cadena con el número de páginas y sus correspondientes enlaces
for (i=0;i<numPaginasF;i++){
numPaginasFSt += "<a href='javascript:pinta("+ num +","+ i +");'>"+ (i+1) +"</a> ";

}

//Establezco si es la primera vez que se crean los elementos
if (primera == 0){

//Pinto todos los elementos con cada dato...
for (DatoI;DatoI<=DatoF;DatoI++){
var creo = document.createElement("span");
document.getElementById("contenido").appendChild(c reo);
contenido.innerHTML += "<br>"+ misDatos[DatoI].nombre +" "+ misDatos[DatoI].apellidos +" "+ misDatos[DatoI].edad +"años.";
}

//... y la paginación.
var pagina = document.createElement("span");
document.getElementById("paginacion").appendChild( pagina);
paginacion.innerHTML += "<br><a href=javascript:pinta("+ num +","+ pagAnt +");><<</a> " + numPaginasFSt + " <a href=javascript:pinta("+ num +","+ pagSig +");>>></a>";
primera = 1;
} else {
//Borro las capas ya pintadas en la primera vez
borra();

//Pinto todos los elementos con cada dato...
for (DatoI;DatoI<=DatoF;DatoI++){
var creo = document.createElement("span");
document.getElementById("contenido").appendChild(c reo);
contenido.innerHTML += "<br>"+ misDatos[DatoI].nombre +" "+ misDatos[DatoI].apellidos +" "+ misDatos[DatoI].edad +"años.";
}
//... y la paginación.
var pagina = document.createElement("span");
document.getElementById("paginacion").appendChild( pagina);
paginacion.innerHTML += "<br><a href=javascript:pinta("+ num +","+ pagAnt +");><<</a> " + numPaginasFSt + " <a href=javascript:pinta("+ num +","+ pagSig +");>>></a>";

}
}

function borra(){
contenido.innerHTML = "";
paginacion.innerHTML = "";
}

</script>
<body>
<div id="contenido">Paginación en local<br><a href="javascript:pinta(6,0)">Comienza</a></div>
<div id="paginacion"></div>
</body>
</html>

Lo que haré a continuación será el sacar ese array de datos tan féo de ahí y meterlo en una librería a parte para que no se vea "del tirón" al menos.

Espero que te ayude.