Reglas del Foro
Es un foro abierto pero moderado, es decir que cualquier mensaje pasa por el moderador que borrará de inmediato todo lo que suene a spam.
Como puedo mostrar los objetos de un array en columnas
Autor |
Mensaje |
radomir
|
Hola a todos, haber si me podeis solucionar este pequeño problema, tengo un array donde a través de una lista me muestra una serie de objetos, en el ejemplo son fotos y un comentario, pero me muestra los objetos uno debajo de otro, un sólo objeto por fila, y necesito que en cada fila me muestre varios y pase a la siguiente fila y así sucesivamente, o sea, crear una variable columna donde pueda establecer el número de objetos por fila o columnas que quiero que me muestre. saludos Código: <STYLE type="text/css"> #principal UL { BACKGROUND-COLOR: yellow; PADDING-TOP: 10px; PADDING-RIGHT: 0px; PADDING-BOTTOM: 10px; PADDING-LEFT: 7px; margin-top: 30px; margin-right: auto; margin-left: auto; WIDTH: 575px; OVERFLOW: hidden; } #principal li { display:inline; float:left; width:110px; background-color:#f5f7f9; padding:5px; margin:10px; text-align: center; border-right: #a5a7aa solid 1px; border-bottom: #a5a7aa solid 1px; } </style>
Código: var nombre = [["foto1","comentario"], ["foto2","comentario"], ["foto3","comentario"], ["foto4","comentario"], ["foto5","comentario"], ["foto6","comentario"], ["foto7","comentario"], ["foto8","comentario"], ["foto9","comentario"]];
var filas = 3; var columnas = 4;
var Pagify = function(pArray, pCounter) { var array = pArray; var pointer = 0; var btnPrevious; var btnNext; var btnFirst; var btnLast; var counter = pCounter; var self = this; this.canNext = function() { return (pointer + counter < array.length); } this.canPrevious = function() { return (pointer >= counter); } this.first = function() { pointer = 0; self.show(); } this.last = function() { var multiply = Math.floor(array.length / counter)-1; pointer = counter * multiply; self.show(); } this.next = function() { if (self.canNext()) { pointer += counter; self.show(); } } this.previous = function() { if (self.canPrevious()) { pointer -= counter; self.show(); } } this.setPreviousButton = function(buttonId) { btnPrevious = document.getElementById(buttonId); btnPrevious.onclick = self.previous; } this.setFirstButton = function(buttonId) { btnFirst =document.getElementById(buttonId); btnFirst.onclick = self.first; } this.setLastButton = function(buttonId) { btnLast = document.getElementById(buttonId); btnLast.onclick = self.last; } this.setNextButton = function(buttonId) { btnNext =document.getElementById(buttonId); btnNext.onclick = self.next; } this.show = function() { document.getElementById("lNombres").innerHTML = ""; for(var i = pointer; i < pointer + counter && i < array.length ; i++) { document.getElementById("lNombres").innerHTML += " \ <div id=principal><ul><li><img src=images/" + array[i][0] + ".jpg \ <span>" + array[i][1] + "</span></li> \ </ul></div>"; } btnPrevious.disabled = !self.canPrevious(); btnNext.disabled = !self.canNext(); btnFirst.disabled = !self.canPrevious(); btnLast.disabled = !self.canNext(); } }
window.onload = function() { var pagify = new Pagify(nombre, filas); pagify.setPreviousButton("botanterior"); pagify.setNextButton("botsiguiente"); pagify.setFirstButton("botprimero"); pagify.setLastButton("botultimo"); pagify.show(); }
|
12 Dic 2013 21:37 |
|
 |
editor
Site Admin
Registrado: 14 Sep 2012 07:50 Mensajes: 36
|
Hola, y digo ¿por que no usas tablas? Con HTML5 parece que las tablas están endemoniadas y todo se quiere solucionar con DIV,s. Creo que lo que buscas es colocar datos tabulados (sean imágenes, textos...) y eso es una tabla, con document.write vas colocando las filas y dentro de cada fila las celdas (columnas) con sus contenidos. No se, a lo mejor me he perdido algo de lo que pretendes. Un par de bucles y listo.
|
13 Dic 2013 00:35 |
|
 |
radomir
|
Me da igual que sea una tabla o cualquier otro elemento, aunque estoy más acostumbrado a las listas o a los div, pero el problema es el mismo necesito una función que a través de una variable le pueda decir quiero 3 columnas o quiero 4 las que me quepan y me meta, en este caso una foto en cada celda de una fila hasta completar todas las columnas y continue por la fila siguiente, hasta completar el numero de filas que me tiene que mostrar en esa página que esa variable si la tengo creada y continúe en la siguiente página y no sé muy bien como hacer eso y además me tiene que funcionar con una búsqueda que estoy creando
|
13 Dic 2013 14:51 |
|
 |
editor
Site Admin
Registrado: 14 Sep 2012 07:50 Mensajes: 36
|
Hola pues es fácil, la función la llamas con los argumentos cols :columnas que quieres img: array con las URL de las imágenes text: array con los textos de las imágenes
(también podrías usar un array bidimensional, pero voy a lo más simple) Mostraría filas alternas: una con imágenes y la siguiente con un texto.
function mostrar(col, img, txt) { var filas, indF, indC; filas = Math.ceil(img.length/col) document.write("<table>") for (indF=0; indF < filas; indF++) { document.write("<tr>") for (indC=indF*col; indC < indF*col+col; indC++) { if (typeof(img[indC]) != "undefined") document.write("<td><img src=\""+img[indC]+"\"></td>") else document.write("<td> </td>") } document.write("</tr>") document.write("<tr>") for (indC=indF*col; indC < indF*col+col; indC++) { if (typeof(txt[indC]) != "undefined") document.write("<td>"+txt[indC]+"</td>") else document.write("<td> </td>") } document.write("</tr>") } document.write("</table>") }
Este es el esquema de la función, puedes cambar la tabla por bloques DIV con displayas tipo table, table-row y tebla-cell, pero es tan simple.... Saludos
|
14 Dic 2013 21:39 |
|
 |
radomir
|
He incluido el código tuyo con unos cambios en una función que a través de unos botones pueda ir de una página a otra, ir al principio o ir al final, al cargar la página me muestra correctamente la tabla con las filas y las columnas que yo he establecido, pero ahora necesito que al pinchar en el botón de siguiente, por ejemplo, pase a la siguiente pagina y muestre las fotos correspondientes en funcion de las columnas y las filas establecidas y he probado varias cosas pero me da siempre el error array[indC] is undefined y me muestra la página vacía. Código: var nombre = new Array(); nombre = [["comentario1","foto1"], ["comentario2","foto2"], ["comentario3","foto3"], ["comentario4","foto4"], ["comentario5","foto5"], ["comentario6","foto6"], ["comentario7","foto7"], ["comentario8","foto8"], ["comentario9","foto9"], ["comentario10","foto10"]];
var filas = 2; var col = 4;
var Pagify = function(pArray, pCounter) { var array = pArray; var pointer = 0; var btnPrevious; var btnNext; var btnFirst; var btnLast; var counter = pCounter; var self = this; this.canNext = function() { return (pointer + counter < array.length); } this.canPrevious = function() { return (pointer >= counter); } this.first = function() { pointer = 0; self.show(); } this.last = function() { var multiply = Math.floor(array.length / counter)-1; pointer = counter * multiply; self.show(); } this.next = function() { if (self.canNext()) { pointer += counter; self.show(); } } this.previous = function() { if (self.canPrevious()) { pointer -= counter; self.show(); } } this.setPreviousButton = function(buttonId) { btnPrevious = document.getElementById(buttonId); btnPrevious.onclick = self.previous; } this.setFirstButton = function(buttonId) { btnFirst =document.getElementById(buttonId); btnFirst.onclick = self.first; } this.setLastButton = function(buttonId) { btnLast = document.getElementById(buttonId); btnLast.onclick = self.last; } this.setNextButton = function(buttonId) { btnNext =document.getElementById(buttonId); btnNext.onclick = self.next; } this.show = function() { document.getElementById("nombres").innerHTML = "";
{ var filas, indF, indC, txt; filas = Math.ceil(array.length/col)
Contenido = '<table>'; for(var i = pointer; i < pointer + counter && i < array.length ; i++) //for (indF=0; indF < filas; indF++) { Contenido += '<tr>'; for (indC=i*col; indC < i*col+col; indC++) { if (typeof(array[indC][1]) != "undefined") Contenido += '<td><img src=\"images/'+array[indC][1]+'.jpg\"></td>'; else Contenido += '<td> </td>'; } Contenido += '</tr>'; Contenido += '<tr>'; for (indC=i*col; indC < i*col+col; indC++) { if (typeof(array[indC][0]) != "undefined") Contenido += '<td>'+array[indC][0]+'</td>'; else Contenido += '<td> </td>'; } Contenido += '</tr>'; } Contenido += '</table>'; document.getElementById("nombres").innerHTML += Contenido; } btnPrevious.disabled = !self.canPrevious(); btnNext.disabled = !self.canNext(); btnFirst.disabled = !self.canPrevious(); btnLast.disabled = !self.canNext();
} }
window.onload = function() { var pagify = new Pagify(nombre, filas); pagify.setPreviousButton("botanterior"); pagify.setNextButton("botsiguiente"); pagify.setFirstButton("botprimero"); pagify.setLastButton("botultimo"); pagify.show(); }
|
16 Dic 2013 21:20 |
|
 |
editor
Site Admin
Registrado: 14 Sep 2012 07:50 Mensajes: 36
|
Hola La función que escribe la tabla está hecha pensando en una tabla que muestra todos los elementos de la matriz, pero todos, y cada celda corresponde a un elemento de esa matriz. Tu quieres mostrar parte de la matriz en cada vez, por tanto tienes cambiar los límites de los índices, si no te pasas. Cambia indC < i*col+col por indC < i*col+col && indC < array.length
Saludos
|
16 Dic 2013 23:44 |
|
 |
radomir
|
Ahora ya va a la página siguiente, pero la paginación no funciona correctamente, al pinchar en el botón de siguiente va paginando según el número establecido en la variable filas, si tienes puesto 2 filas el va paginando de 2 en 2 aunque en la primera página ya haya mostrado todos los elementos, así hasta llegar al final, según el array.length Así que necesito indicarle en la tabla el número de filas que quiero, igual que le indico las columnas y a la hora de paginar que tenga en cuenta ese Nº de filas más las columnas, pero he probado de distintas formas y no me funciona.
|
17 Dic 2013 22:21 |
|
 |
editor
Site Admin
Registrado: 14 Sep 2012 07:50 Mensajes: 36
|
Hola de nuevo Veamos, lo que tu quieres es que la tabla se vaya haciendo un scroll de filas sin usar frames. Es decir mostrar las dos primeras filas, luego las dos siguientes... ¿es eso? Yo veo que con tu código ya corregido la tabla se muestra correctamente, primero las filas 1 y 2 y luego la fila 3 con solo 2 elementos (9 y 10) ¿no es eso?
Saludos
|
19 Dic 2013 21:12 |
|
 |
radomir
|
Efectivamente eso es lo que yo quiero y el problema está en los botones de siguiente y de última, porque cuando pasan de página y me muestran ya las últimas fotos y por tanto están ya en la última página deberían deshabilitarse y sin embargo no lo hacen, siguen activos y me permiten ir a la siguiente página que lógicamante me la muestran vacía porque ya no hay más fotos. Saludos
|
21 Dic 2013 12:18 |
|
 |
editor
Site Admin
Registrado: 14 Sep 2012 07:50 Mensajes: 36
|
Hola Tienes que modificar la comprobación de las funciones canNext, debes controlar el número de páginas no la longitud de la matriz. Por ejemplo en canNext var multiply = Math.floor(array.length / counter)-1; return ((pointer+counter) < multiply);
multiply lo usas me parece que para sacar el número relacionado con el número de paginas mostradas, según entresaco del código.
Saludos
|
21 Dic 2013 18:47 |
|
|
¿Quién está conectado? |
Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 1 invitado |
|
No puede abrir nuevos temas en este Foro No puede responder a temas en este Foro No puede editar sus mensajes en este Foro No puede borrar sus mensajes en este Foro
|
|