Foros del Web » Programando para Internet » Javascript »

Paginación con javascript

Estas en el tema de Paginación con javascript en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/10/2004, 04:49
 
Fecha de Ingreso: octubre-2004
Mensajes: 3
Antigüedad: 20 años, 1 mes
Puntos: 0
Pregunta Paginación con javascript

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.
  #2 (permalink)  
Antiguo 10/10/2004, 07:50
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 10/10/2004, 08:48
 
Fecha de Ingreso: octubre-2004
Mensajes: 3
Antigüedad: 20 años, 1 mes
Puntos: 0
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.
  #4 (permalink)  
Antiguo 02/08/2005, 01:37
 
Fecha de Ingreso: julio-2005
Mensajes: 31
Antigüedad: 19 años, 4 meses
Puntos: 0
Creo que tengo algo...

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&ntilde;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&ntilde;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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 02:05.