Modificar el Nº de columnas según condición

[pedromir]

Hola a todos, tengo una tabla que creo dinámicamente, con varias columnas para mostrar unas fotos de distintos géneros que salen de un array y quiero que al terminar un género,
si en la última fila no completa todas las columnas me queden estas vacías y el siguiente género pase a la siguiente fila y así con todos.

Lo que se me ha ocurrido, no sé si es la mejor opción, es modificar el número de columnas para la última fila de cada género, con el fin de que el nº de columnas sea el mismo que el de fotos a mostrar.
He hecho una función que me cuenta el nº de fotos de cada género pero no se como hacer para que me cambie el nº de columnas en una fila concreta, que sería la última de cada género, según el resultado de esta función.
Saludos

Código Javascript:

var fotos = new Array();
fotos = [["paisaje","foto1"],
                [paisaje","foto2"],
                ["paisaje","foto3"],
                ["monumento","foto4"],
                ["monumento","foto5"],
                ["monumento","foto6"],
                ["deporte","foto7"],
                ["deporte","foto8"],
                ["deporte","foto9"]];
 
var col = 2;
var filas = 2;
 
function countElement(){
    count = 0;  
 
  for(var i in fotos){
    
    if(fotos[i][0] == "paisaje") count++;
        contador = count;
    }
    multiply = contador-(col*filas);      
    if (multiply < parseInt(col)) {
 
 // Y hasta aquí he llegado
 
    return ();
  }
 
            Contenido = '<table id=fotos>';
            Contenido += '<tr>'
            for (indC=i*col; indC < i*col+col && indC < fotos.length; indC++)           
            {           
            Contenido += '<td id="genero">'+fotos[indC][0]+'</td>';         
            }                       
            Contenido += '</tr>';
            Contenido += '<tr>';
            for (indC=i*col; indC < i*col+col && indC < fotos.length; indC++)
            {           
            Contenido += '<td class="diapositivas"><img src=\"images/'+fotos[indC][1]+'.jpg\"></td>';           
            }           
            Contenido += '</tr>';           
            Contenido += '</table>';
            res.push(Contenido);
 

el +col habria que sustituirlo por una función pero lo que he probado no me funciona

[Alexis88]

Creo que se vería más ordenado si se mostrara el nombre de la categoría en una celda y las fotos en otra, en lugar de estar creando una celda para cada imagen, porque, por ejemplo, si la fila 1 tiene 4 imágenes, la fila 2 tiene 2 imágenes y la fila 3 tiene 5 imágenes, se vería un poco anti-estética la diferencia de tamaños por cada fila.

Yo te propongo hacerlo así:

Código Javascript:

var fotos = {"paisaje": ["fotoP1.jpg", "fotoP2.jpg", "fotoP3.jpg"],
             "monumento": ["fotoM1.jpg", "fotoM2.jpg"],
             "deporte": ["fotoD1.jpg", "fotoD2.jpg", "fotoD3.jpg"]
            },
    tabla = document.createElement("table");
 
for (var i in fotos){
    var fila = document.createElement("tr"),
        columna1 = document.createElement("td"),
        columna2 = document.createElement("td");
    
    columna1.innerHTML = i;
    columna1.style.textAlign = "center";  
    columna2.style.textAlign = "center";
  
    for (var j in fotos[i]){
        var img = document.createElement("img");
        img.src = fotos[i][j];
        columna2.appendChild(img);
    }
    fila.appendChild(columna1);
    fila.appendChild(columna2);
    tabla.appendChild(fila);
}
 
tabla.border = 1;
document.body.appendChild(tabla);
 

En un objeto literal, inserto los géneros como propiedades de éste y cada uno de ellos tiene asociado a un array con sus respectivas fotos, que en este caso son nombres de ejemplo pero puedes reemplazarlos por los nombres de las imágenes que deseas mostrar. También creo una tabla.

Con ayuda de un bucle, recorro las propiedades del objeto; en cada iteración, creo una fila y dos columnas, a la primera fila le inserto el nombre de la propiedad que representa al género, además, asigno una alineación del texto al centro de cada columna. Con ayuda de otro bucle, recorro el array relacionado a la propiedad actual; en cada iteración, creo un elemento de imagen y le asigno la imagen equivalente a la iteración actual, luego, inserto en la segunda columna al elemento de imagen con la imagen ya asignada.

Culminado el segundo bucle, adhiero ambas columnas a la fila y ésta a la tabla. Así será en cada iteración hasta formar la tabla. Una vez formada la tabla, le asigno un border para delimitar las celdas y la adhiero al cuerpo del documento.

Así es como se verá: http://jsbin.com/AtUKALO/1

Saludos

[pedromir]

La página que estoy haciendo tiene varios botones para ir al principio, anterior, siguiente y al final, y además va a tener un enlace por cada género, entonces mi idea, es empezar mostrando un género, si tiene suficientes fotos, le das al botón de siguiente y pasarías a la siguiente página siguiendo con el mismo género y cuando termine este, en la siguiente fila comenzaría el siguiente y así sucesivamente, hasta terminar todos, si quieres ver exclusivamente un género, pinchas en el enlace correspondiente y solo se mostrarían las fotos correspondientes a ese género, y podrías paginar dentro de ese género con los botones correspondientes, que quieres ver todos los géneros de nuevo, pues he hecho un botón que volvería a mostrar todas las fotos.
Lo del género que aparece encima de cada foto, lo que he hecho también es que me lo muestre en una nueva fila, pero ya ocupando todas las columnas de esa fila, con un texto grande, centrado, etc., para ello lo que hago es un colspan para que ocupe todas las columnas, te muestro la función y la línea de código de la tabla y eso si me funciona bien.

Código Javascript:

function generoColspan() { 
    var genero;         
    if (array[indC][0] == "001") {      
        genero = '<FONT COLOR="blue">PAISAJE</FONT>';
    }else if (array[indC][0] == "002") {        
        genero = '<FONT COLOR="yellow">DEPORTE</FONT>';
    }else if (array[indC][0] == "003") {
        genero = "RETRATOS";                
    }else if (array[indC][0] == "004") {        
        genero = '<FONT COLOR="green">MONUMENTOS</FONT>';   
                
    }   
    return (genero)
 }
 
Contenido += '<tr>';
for (indC=i*col; indC < i*col+1 && indC < array.length; indC++)
{
Contenido += '<td colspan="2" id="genero">'+generoColspan() +'</td>';
}
 

Lo he subido a jsfiddle.net/Z93V3/2/ échale un vistazo para que veas la idea, el código no es el mismo que el que estoy utilizando ahora porque hay cosas que no me funcionaban, asi que lo he cambiado, pero en la creación de la tabla si utiliza el mismo código.
Saludos

[Alexis88]

Si ya estás paginando, creo deberías hacerlo pero tomando todas las imágenes como si se trataran de la misma categoría, de este modo, irás mostrándolas en páginas sucesivas hasta llegar al final, puedes usar la cantidad de fotos de cada género como un delimitador y con eso podrías insertar el nombre del género cuando acabe uno y empiece el siguiente.

Saludos

[pedromir]

Esta idea, para lo que estoy haciendo o pretendo hacer me parece más apropiada. Lo primero sería crear una función que me cuente las fotos de cada género que tengo.

Código Javascript:

function contar(count) {    
var count = 0;
//Busca y cuenta cuantos objetos con el código 001 hay
for(var ini in array){ 
    if(array[ini][0] == "001") count++; 
    }   
    return (count)
 }
 

Una vez que ya sé los objetos de cada especie que tengo el limitador iría en la función que controla la paginación, o sea, dentro de la función mostrarResultados y ya no en la tabla como era mi idea inicial, por lo que te he entendido sería eso, si ves que me cuesta un poco entender las cosas no me lo tengas en cuenta, pero es que de javascript ando un poco justito.

Código Javascript:

function numeroPaginasTotal(){
    return Math.ceil(buscarNombre.length/(col*filas))-1;
}
 
function mostrarResultados(pagina){
    var res=[];
    var ini=pagina*filas;
    var fin=Math.min(buscarNombre.length, ini+filas);
    pagActual=pagina;
    for (;ini<fin;ini++)
    {
//y este es el botón de siguiente
btnSiguiente.onclick=function(){ mostrarResultados(Math.min(numeroPaginasTotal(), pagActual+1));
 

[Alexis88]

No te preocupes hermano, al contrario, se ve que captas rápido la idea, solamente pagina con todas las imágenes y el delimitador para diferenciar cuando se están viendo imágenes de uno u otro género, será la cantidad de imágenes que cada género tiene, por lo que solamente te haría falta comprobar si ya se mostraron todas las imágenes en la página actual para mostrar el nombre del siguiente género.

Saludos

[pedromir]

La idea y el concepto lo tengo claro, pero ahora me falla el aspecto técnico, ya he modificado el código, estoy intentando hacer lo que tu me dices, pero no lo estoy haciendo bien y no va

[pedromir]

Me he creado una función pero no sé como meterle el delimitador, no doy con la forma de que me lo muestre como yo quiero, con esta función lógicamente me muestra sólo un género, no sé como hacer lo que me has comentado, estoy bloqueado, agradecería cualquier ayuda.
Saludos

Código Javascript:

function mostrar(){
    var cadena= "002";  
    var n = datos.length;   
    buscarNombre = [];  
    for (var i=0;i<n;i++)   
    {   
        if (datos[i][0].indexOf(cadena)>=0)
        {
            buscarNombre.push(datos[i]);
        }
    }
    txtResultados.innerHTML=buscarNombre.length;
    mostrarResultados(0);   
}