Buscar temas sin respuesta | Ver temas activos Fecha actual 19 Ago 2017 23:31

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.



Responder al tema  [ 15 mensajes ]  Ir a página 1, 2  Siguiente
 Como puedo mostrar los objetos de un array en columnas 
Autor Mensaje
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
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
Perfil WWW
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
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
Perfil WWW
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
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
Perfil WWW
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
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
Perfil WWW
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
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
Perfil WWW
Mostrar mensajes previos:  Ordenar por  
Responder al tema   [ 15 mensajes ]  Ir a página 1, 2  Siguiente

¿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

Buscar:
Saltar a:  
cron
Desarrollado por phpBB® Forum Software © phpBB Group
Designed by ST Software for PTF.
Traducción al español por Huan Manwë para phpBB-Es.COM