Bienvenidos sean a este post, hoy repasaremos temas que hemos visto en posts anteriorres.
Como este es un tema que ya vimos vamos a pasar directamente al ejemplo, para ello crearemo sun nuevo directorio donde estaran todos nuestros archivos, el primero que crearemos sera lista.html y le agrregaremos el siguiente codigo:
lista.html
<pre class="wp-block-syntaxhighlighter-code"><html>
<head>
<title>Inventario</title>
<link rel="stylesheet" href="estilo.css" type="text/css"/>
<a href="https://code.jquery.com/jquery-3.6.4.min.js">https://code.jquery.com/jquery-3.6.4.min.js</a>
<a href="http://codigo.js">http://codigo.js</a>
</head>
<body>
<div id="contenedor">
<h1>Inventario</h1>
<div id="secciones">
Secciones:
<a href="seccion/todos.html" class="seleccionado">Todos</a>
<a href="seccion/verduras.html">Verduleria</a>
<a href="seccion/carnes.html">Carniceria</a>
<a href="seccion/pescado.html">Pescaderia</a>
<a href="seccion/pan.html">Panaderia</a>
<a href="seccion/bodega.html">Bodega</a>
<a href="seccion/limpieza.html">Limpieza</a>
</div>
<table id="stock">
<thead>
<tr>
<th>Producto</th>
<th>Cantidad</th>
<th>Valor</th>
<th>Seccion</th>
</tr>
</thead>
<tbody>
<tr><th colspan="4">Agosto</th></tr>
<tr>
<td>Espinaca</td>
<td>20</td>
<td>2.5</td>
<td>Verduleria</td>
</tr>
<tr>
<td>Salmon</td>
<td>15</td>
<td>10</td>
<td>Pescaderia</td>
</tr>
<tr>
<td>Jabon</td>
<td>40</td>
<td>1.2</td>
<td>Limpieza</td>
</tr>
<tr>
<td>Galletas</td>
<td>60</td>
<td>1.1</td>
<td>Panaderia</td>
</tr>
<tr>
<td>Berenjena</td>
<td>25</td>
<td>2</td>
<td>Verduleria</td>
</tr>
<tr>
<td>Pan</td>
<td>35</td>
<td>1.5</td>
<td>Panaderia</td>
</tr>
</tbody>
<tbody>
<tr><th colspan="4">Julio</th></tr>
<tr>
<td>Solomillo</td>
<td>20</td>
<td>3.5</td>
<td>Carniceria</td>
</tr>
<tr>
<td>Tomate</td>
<td>10</td>
<td>2.3</td>
<td>Verduleria</td>
</tr>
<tr>
<td>Bizcochos</td>
<td>33</td>
<td>1.6</td>
<td>Panaderia</td>
</tr>
<tr>
<td>Lejia</td>
<td>10</td>
<td>10</td>
<td>Limpieza</td>
</tr>
<tr>
<td>Vino tinto</td>
<td>14</td>
<td>11</td>
<td>Bodega</td>
</tr>
<tr>
<td>Esponja</td>
<td>10</td>
<td>0.75</td>
<td>Limpieza</td>
</tr>
</tbody>
<tbody>
<tr><th colspan="4">Junnio</th></tr>
<tr>
<td>Vino blanco</td>
<td>11</td>
<td>12</td>
<td>Bodega</td>
</tr>
<tr>
<td>Matambre</td>
<td>16</td>
<td>6.1</td>
<td>Carniceria</td>
</tr>
<tr>
<td>Ajo</td>
<td>25</td>
<td>1.1</td>
<td>Verduleria</td>
</tr>
<tr>
<td>Pastel</td>
<td>11</td>
<td>15</td>
<td>Panaderia</td>
</tr>
<tr>
<td>Dorado</td>
<td>6</td>
<td>20</td>
<td>Pescaderia</td>
</tr>
<tr>
<td>Calabaza</td>
<td>10</td>
<td>9.6</td>
<td>Verduleria</td>
</tr>
</tbody>
</table>
</div>
</body>
</html></pre>
Esta parece compleja pero no lo es tanto, como siempre en el head estableceremos el titulo de la pagina, llamaremos al archivo para dar los estilos a nuestra pagina, estilo.css, despues cargaremos la libreria de jQuery y por ultimo llamaremos al archivo de nuestros codigos de jQuery, codigo.js, despues en el body tendremos el titulo, un div que sera para filtrar nuestras distintas secciones, lo siguiente sera una tabla donde tendremos varios datos de algunos elementos de las distintas secciones en tres meses distintos, son datos simples y nada mas, con esto tenemos nuestra pagina base, pasemos a darle algo de estilo y para ello crearemos un nuevo archivo con el nombre de estilo.css y le agregaremos el siguiente codigo:
estilo.css
html, body {
margin: 0;
padding: 0;
}
body {
font: 80% Verdana, Helvetica, Arial, sans-serif;
color: #000;
background: #fff;
}
#contenedor {
margin: 10px 2em;
}
h1 {
font-size: 2.5em;
margin-bottom: 0;
}
h2 {
font-size: 1.3em;
margin-bottom: .5em;
}
h3 {
font-size: 1.1em;
margin-bottom: 0;
}
a {
color: #06581f;
}
#secciones {
font-size: 0.9em;
margin: 6px 0;
}
#secciones a {
text-decoration: none;
color: #000;
padding: 0 6px;
}
#secciones a.seleccionado {
background-color: #6f93ce;
color: #fff;
}
#secciones a:hover {
background-color: #6f93ce;
color: #fff;
}
#stock {
width: 100%;
border-collapse: collapse;
}
#stock th,
#stock td {
padding: 3px 6px;
vertical-align: top;
}
#stock td:first-child {
width: 148px;
}
#stock th {
text-align: left;
color: #fff;
}
#stock thead th {
background-color: #15b;
}
#stock tbody th {
background-color: #6f93ce;
}
#stock .alt td {
background-color: #ccc;
}
#stock .alt-2 td {
background-color: #ddd;
}
#stock td.seleccionado {
background-color: #eee;
}
.resaltar {
font-weight: bold;
font-style: italic;
color: #080;
}
#stock td.active {
background-color: #dfd;
}
En este caso tenemos todos los estilos para nuestra pagina, desde los basicos de la pagina pasando por los div hasta la tabla con nuestros datos y algunas clases mas para cuando trabajemos con el codigo, antes de pasar al codigo en si, veamos como quedo nuestra pagina hasta ahora
Ahora empecemos con la diversion para ello vamos a crear un archivo con el nombre de codigo.js y le agregaremos este codigo inicial:
codigo.js
$(document).ready(function() {
$('#secciones a').click(function(ev) {
ev.preventDefault();
var seccion = $(this).text();
$('#secciones a.seleccionado').removeClass('seleccionado');
$(this).addClass('seleccionado');
$('#stock tr').show();
if (seccion != 'Todos') {
$('#stock tr:has(td):not(:contains("' + seccion + '"))')
.hide();
}
});
});Primero estableceremos el evento click para todos los link en el div secciones, como siempre usamos a preventDefault para evitar que ejecute su conducta normal, lo siguiente sera definir una variable donde almacenaremos el texto en el link seleccionado, despues seleccionaremos al link que esta con la clase seleccionado y se la removeremos para luego tomar el nuevo link que elegimos y le aplicaremos esta clase, es decir con esto haremos el efecto de mostrar el ultimo link elegido, nuestro siguiente paso sera mostrar todas las lineas de la tabla para despues tener un condicional donde verifica que seccion sea distinto de Todos, en caso de ser verdadero procede a seleccionar todas las lineas que no contengan el valor en la variable seccion y procede a esconderlas, veamos como trabaja ahora nuestra pagina
Como pueden ver funciono perfecto donde cada vez que seleccionamos una seccion se aplica al listado y deja unicamente los seleccionados a excepcion de cuando seleccionamos Todos donde se vuelve al primer estado, vamos a tomar ese codigo y modificarlo de la siguiente manera:
$(document).ready(function() {
$('#secciones a').click(function(ev) {
ev.preventDefault();
var seccion = $(this).text();
$('#secciones a.seleccionado').removeClass('seleccionado');
$(this).addClass('seleccionado');
$('#stock').find('tr').show();
if (seccion != 'Todos') {
$('#stock').find('tr:has(td)').not(function() {
return $(this).children(':nth-child(4)')
.text() == seccion;
}).hide();
}
});
});Tecnicamente es el mismo codigo pero un poco mas dificil, pero porque complicarlo? bueno tiene su razon, agregamos algunos find para que sea mas especifica la busqueda de lo que vamos a trabajar y en el condicional utilizamos el find para el tr y le aplicamos el not porque nos permite hacer un llamado a una funcion para trabajar mejor y hacer mejor algunas cosas que :not y :contains no permiten, sobre estos dos hemos hablado brrevemente cuando vimos filtrados y selector, observen que comparamos el contenido de la cuarta celda con el de seccion por lo tanto si coincide lo devolvera pero el not lo negara, por lo tanto solo escondera lo que sea distinto a seccion, es decir hace lo mismo que antes pero mas dificil, con esto comentado pasemos al siguiente tema.
Separando las filas de la tabla
En este post hablamos de como seleccionar filas y pintarlas para distintguirlas, y ahi utilizamos para seleccionar las pares e impares mediante even y odd respectivamente, ahora vamos a aplicarlo y para ello a codigo.js le agregaremos el siguiente bloque de codigo:
$(document).ready(function() {
$('#stock').find('tr:nth-child(even)').addClass('alt');
});Esta es una version muy simple donde le diremos que seleccione todos las filas de la table y mediante nth-child le diremos que solo tome las pares y le aplique la clase alt, recuerden que la fila 0 es considerada par, la fila 1 es impar, y asi alternando entre uno y otro, si van a la pagina se vera de la siguiente forma
Como podemos observar en el caso de todos va alternando entre pares e impares, y si aplicamos los filtros que hicimos anteriormente pueden ver que mantienen la coloracion o no, pero vamos a hacerlo un poco mas entretenido, para ello tomaremos el codigo anterior y lo cambiaremos de la siguiente forma:
$(document).ready(function() {
$('#stock tbody').each(function() {
$(this).children().has('td').filter(function(indice) {
return (indice % 4) < 2;
}).addClass('alt');
});
});En este caso seleccionaremos cada tbody de stock y para cada uno mediante each le aplicaremos una funcion, en el bloque de este a cada elemento chequearemos si tiene una columna y le aplicamos a filter, donde lo devolveremos siempre y cuando el valor del indice del elemento aplicando el operador de modulo, este devuelve el resto de la division en este caso por cuatro, sea menor a dos, y al elemento devuelto le aplicaremos la clase, esto hara que en lugar de aplicar uno intercalado aplique la intercalacion cada dos filas, si refrescamos nuestra pagina se vera de la siguiente forma
Con esto comprendido podemos pasar con el ultimo tema.
Combinando los temas anteriores
Tal como dice el titulo ahora vamos a combinar las dos acciones que vimos anteriormente, la filtracion y el separar por colores, para ello primero borraremos el bloque agregado anteriormente y despues tomaremos el ultimo codigo del primer caso y lo modificaremos de la siguiente manera:
$(document).ready(function() {
function marcar() {
$('#stock').find('tr.alt').removeClass('alt');
$('#stock tbody').each(function() {
$(this).children(':visible').has('td')
.filter(function(indice) {
return (indice % 2) < 1;
}).addClass('alt');
});
}
marcar();
$('#secciones a').click(function(ev) {
ev.preventDefault();
var seccion = $(this).text();
$('#secciones a.seleccionado').removeClass('seleccionado');
$(this).addClass('seleccionado');
$('#stock').find('tr').show();
if (seccion != 'Todos') {
$('#stock').find('tr:has(td)').not(function() {
return $(this).children(':nth-child(4)')
.text() == seccion;
}).hide();
}
marcar();
});
});En este caso prrimero agregaremos una nueva funcion llamada marcar, nuestra primera accion sera remover la clase alt de los tr que este aplicado, despues seleccionaremos todos los tbody de nuestra pagina y a traves de each ejecutaremos una funcion donde con this tomaremos cada tbody y buscaremos hijos (children) que esten visibles, recuerden que si lo ocultamos con hide no tendran ese estado, y por medio de has solo usaremos los que tengan celdas, a este le aplicaremos un filtro donde tomaremos el indice de la fila actual y devolveremos el objeto seleccionado si el valor del resto de aplicar el operador de modulo es menor a uno, en el caso anterior usamos otros valores pero es exactamente lo mismo, y en caso de devolverlo le aplicara la clase alt, esta operacion hara algo similar a cuando diferenciamos de pares e impares, lo siguiente sera llamar a esta funcion para que lo aplique cuando cargamos la pagina, despues seguimos con la misma funcion y el mismo codigo para cuando hagamos click sobre algunas de las secciones pero con un solo cambio, antes de salir del evento volvemos a llamar a marcar para que vuelva a verificar cual son los que quedaron activos y aplicar los cambios necesarios, con esto comentado veamos como quedo la pagina ahora
Pueden ver que ahora mantiene el mismo efecto sin importar los cambios del filtrado, si se preguuntan porque repeti la ultima formula y no use la primera que era mas simple? la respuesta es facil, con esta como pueden ajustarla a su necesidad de como marcar, ya sea intercalado de a uno o entre varios, antes de finalizar les dejo los archivos finales de este post:
En resumen, hoy hemos hecho un pequeño repaso de como filtrar en una pagina, despues de como separar por filas con distintos estilos, para finalmente combinar ambos temas, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 