Share
Cuando una página web está diseñada para mostrar grandes tablas de datos, se debe prestar mucha atención a permitir que el usuario clasifique los datos de manera estructurada. En este artículo, repasaré cuatro técnicas: efectos de desplazamiento, filas de cebra, filtrado y clasificación.
Hay algunas notas importantes que debemos abordar antes de mirar nuestro código Javascript. El marcado de la tabla HTML será como cualquier otra tabla que haya creado, excepto que nosotros
requieren dos etiquetas que muchas personas omiten. La sección de la cabeza de la mesa debe estar envuelta en . El cuerpo de la
La tabla, donde se guardan todos los datos que queremos mostrar, debe estar envuelta en
| Nombre de pila | Apellido | Ciudad | Estado |
|---|---|---|---|
| Mannix | Bolton |
Las filas de cebra son una técnica de organización de datos muy común que son fáciles de implementar y tienen un impacto poderoso. Filas de cebra en
La esencia es alternar el estilo de filas impares e incluso para facilitar la lectura horizontal de los datos. Esto es muy importante con
datos de varias columnas para que los usuarios puedan mirar una columna y leer fácilmente los datos asociados en la misma fila bajo otros encabezados. En el
En los ejemplos que usaré en este tutorial, tengo una lista de personas con cuatro propiedades: nombre, apellido, ciudad y
estado. Fíjate en cómo alterno los colores de las filas y los colores de las fuentes para maximizar el efecto..
Ahora en las filas de cebra reales. El primer lugar para comenzar es un archivo CSS externo vinculado al documento. El primer elemento para
objetivo es la mesa.
tabla fondo-color: blanco; ancho: 100%;
Esto es bastante trivial; Le estamos diciendo al fondo de la tabla que sea blanco y que se extienda hasta el 100% del ancho del elemento principal. A continuación vamos a apuntar
los elementos celulares
tbody td color de fondo: blanco; tbody td.odd background-color: # 666; color blanco;
Aquí estamos configurando una clase para las filas "impares" de la tabla que establecen un color de fondo y una fuente de color alternativos. También establecemos un estilo por defecto para todos td
Elementos que se aplicarán inherentemente a las filas "pares". Este es todo el CSS que se requiere. ¡Te dije que era sencillo! Ahora veamos el código jQuery. los
El poder de los selectores de jQuery hace que esto sea tan fácil como el código CSS. Todo lo que necesitamos hacer es apuntar a las celdas y usar la función addClassName.
Accentsconagua
$ (document) .ready (function () zebraRows ('tbody tr: odd td', 'odd');); // se utiliza para aplicar la función zebraRows de los estilos de fila alternativos (selector, className) $ (selector) .removeClass (className) .addClass (className); Este código, aunque breve, tiene algunos errores que considerar. En primer lugar, notemos cómo abstraemos la implementación de una función; Esto es ideal porque si cambiamos el
Los datos de la tabla de forma asíncrona, sin una actualización de la página, queremos asegurarnos de que las filas sigan alternando el estilo. Por el mismo motivo también invocamos el
La función removeClass es tal que si una fila es inicialmente impar, pero se vuelve uniforme, estamos seguros de que la definición de la clase impar no permanece. Esto puede parecer confuso en este momento,
pero cuando veamos el filtrado más adelante, esto será más claro. Por el bien del código reutilizable, también requerimos que el selector y el nombre de la clase se pasen a
la función, por lo que se puede utilizar en proyectos que tienen diferentes nombres de clase o requisitos de selector (es decir, un sitio que tiene varias tablas, solo una de ellas).
que desea apuntar). Si revisa la función ready (), se ejecuta una función jQuery cuando la página está
Terminado de cargar, verá nuestra llamada a zebraRows (). Aquí es donde pasamos en el selector y el nombre de la clase. El selector utiliza una sintaxis especial de jQuery.
: impar, que encontrará todas las filas impares. Luego buscamos todos los elementos hijos de la fila que son celdas. Este codigo
es bastante simple para cualquiera que haya usado jQuery anteriormente, pero la simplicidad debe hacer que el código sea bastante legible para cualquiera.
Nota: Si bien usar jQuery para aplicar colores de fila alternativos es una solución simple, no es degradable si un usuario tiene JavaScript deshabilitado. me gustaría
se recomienda aplicar la clase impar en el servidor, ya sea en código PHP o en el HTML estático, aunque esto está fuera del alcance de este artículo.
Un efecto realmente bueno para los usuarios es resaltar la fila sobre la que se encuentran actualmente. Esta es una excelente manera de seleccionar datos específicos que podrían interesarles.
in. Esto es muy simple de implementar usando jQuery, pero primero un poco de CSS.
… Td.hovered background-color: lightblue; color: # 666; …
Este es todo el CSS que necesitamos, básicamente cuando pasamos el mouse sobre una fila, queremos que todas las celdas de esa fila tengan un fondo azul claro y un color de fuente gris. los
jQuery para que esto suceda es igual de simple.
… $ ('Tbody tr'). Hover (function () $ (this) .find ('td'). AddClass ('hovered');, function () $ (this) .find ('td' ) .removeClass ('hovered'););… Estamos haciendo uso de la función hover () en la biblioteca jQuery. Se necesitan dos argumentos que son
funciones que queremos ejecutar cuando el mouse se desplaza sobre y cuando el mouse se mueve fuera del elemento, respectivamente. Cuando se ciernen sobre una fila queremos encontrar todos
Las celdas dentro de la fila y agregar la clase desplazada a ellos. Cuando el mouse abandona el elemento, queremos eliminar esa clase. Esto es todo lo que tenemos que hacer para
obtener el efecto de hover, ve a probarlo!
Ahora las cosas con mucha carne - en realidad manipulando los datos que se muestran. Si un sitio web requiere que se muestren muchos registros de datos, en mi ejemplo 1000 filas, entonces
es más que apropiado para ofrecer al usuario una forma de revisar los datos. Una forma particularmente efectiva que ha surgido en la web en los últimos años como parte de
El movimiento Web2.0 / AJAX se está filtrando. Esto también es algo que Apple impulsa en gran medida en aplicaciones como iTunes. El objetivo para nosotros es permitir al usuario.
para escribir una consulta de búsqueda en una entrada de texto estándar y filtrar en vivo las filas de la tabla a continuación, solo se muestran las que contienen texto coincidente. Esto es posiblemente más
Avanzó luego los estilos de fila alternos, pero en realidad requiere un código mínimo, debido a la funcionalidad incorporada de jQuery.
Primero escribiremos una función genérica que toma un selector y una cadena de texto. Esta función buscará todos los elementos que coincidan con ese selector buscando
la cuerda. Si encuentra la cadena, mostrará el elemento y aplicará un nombre de clase visible para el elemento, de lo contrario, ocultará el elemento. ¿Por qué estamos aplicando
la clase de visible? Bueno, una vez que los elementos estén ordenados, desearemos ejecutar la función zebraRows nuevamente, pero debemos decirle a jQuery que ignore las filas ocultas, y
la mejor manera que he encontrado para hacer eso es aplicar una clase de visible.
La búsqueda real se realiza mediante la función de JavaScript, llamada apropiadamente, search (). Aunque debido a la forma en que funciona el DOM, si no empleamos la función jQuery,
En el texto (), el cuadro también verá cualquier etiqueta HTML que se encuentre en la fila de la tabla, como
// filtrar los resultados basados en la función de consulta filtro (selector, consulta) consulta = $ .trim (consulta); // recortar la consulta de espacios en blanco = query.replace (/ / gi, '|'); // agregue OR para la consulta regex $ (selector) .each (function () ($ (this) .text (). search (new RegExp (consulta, "i")) < 0) ? $(this).hide().removeClass('visible') : $(this).show().addClass('visible'); ); La sexta línea es donde ocurre la magia, y probablemente requiere un poco de explicación. Comenzando en la línea 5, le decimos al código que pase por todos los elementos
que coinciden con el selector, es decir, las filas, y luego queremos ejecutar el código en la línea 6 usando cada una. La línea 6 es un poco complicada si eres nuevo en programación,
pero es bastante fácil de entender si lo dividimos. Piense en todo antes del signo de interrogación como si fuera una pregunta, si la respuesta a esa pregunta es verdadera, entonces
ejecuta el código a la izquierda de los dos puntos, pero después del signo de interrogación. Si la respuesta es falsa, ejecute el código después de los dos puntos. Esto es esencialmente un si
declaración pero en una forma más concisa conocida como operador ternario, y no sería diferente a la escritura:
... if ($ (this) .text (). Search (nuevo RegExp (consulta, "i")) < 0) $(this).hide().removeClass('visible') else $(this).show().addClass('visible'); … La razón por la que preguntamos si search () devuelve "menos que cero, probamos esa condición. En teoría, no hay nada de malo en comprobar si devuelve (==) -1, pero en la práctica es más seguro simplemente asegurar que es
menos que cero.
Bien, ahora que tenemos una función de filtro completa, usemos eventos jQuery para conectarla a la entrada. Para lograr el efecto en vivo deseamos el evento que queremos
lo que se debe observar es cuando el usuario libera una tecla mientras está enfocada en el cuadro de texto, conocido como clave en JavaScript. Es importante que establezcamos el atributo ID de la
de entrada para que podamos apuntar utilizando jQuery. De vuelta en nuestra función lista, necesitamos agregar código después de nuestra llamada a zebraRows ().
Y el código jQuery:
... // por defecto cada fila a $ visible ('tbody tr'). AddClass ('visible'); $ ('# filter'). keyup (function (event) // si se presiona esc o no se ingresa nada si (event.keyCode == 27 || $ (this) .val () == ") // si se presiona esc, queremos borrar el valor del cuadro de búsqueda $ (this) .val ("); // queremos que cada fila esté visible porque si no se ingresa nada // entonces todas las filas coinciden. $ ('tbody tr ') .removeClass (' visible '). show (). addClass (' visible '); // si hay texto, vamos a filtrar else filter (' tbody tr ', $ (this) .val ()); // volver a aplicar las filas de cebra $ ('. visible td'). removeClass ('odd'); zebraRows ('. visible: odd td', 'odd');… Este código es, con mucho, el más complejo que hemos visto hasta ahora, así que lo atravesaremos línea por línea.
Nota: Una buena nota podría ser usar CSS para ocultar el cuadro de filtro, y justo encima de la llamada clave para mostrarlo, para que los usuarios con JavaScript desactivado no estén
confundidos cuando intentan ordenar los datos, esto se vería así:
... #filter mostrar: ninguno; …
aplicacion.js
... $ ('# filtro'). Show (); ... Wow, eso fue un montón de código, siéntase libre de tomar un descanso para tomar un té / café antes de pasar a la clasificación ...
Bien todo listo? Bien vamos!
Como tarea final, vamos a permitir ordenar la tabla por cualquiera de los encabezados de columna. Esta es una práctica muy estándar que los usuarios anticipan conocida como clic para ordenar.
Cuando el usuario hace clic en uno de los encabezados, queremos ordenar la tabla de forma ascendente y, si vuelven a hacer clic, queremos ordenar la columna de forma descendente. Este código es bastante
Avanzado y no para los débiles de corazón. El concepto inicial vino de
Aprendiendo jQuery 1.3. yo
lo he rediseñado para que se adapte mejor a nuestras necesidades de simplicidad, sin embargo, si desea más control de grano fino, lo remitiré al capítulo 7 del libro, donde
tablas y jQuery se discuten en gran detalle.
Antes de sumergirnos realmente en el código real, es importante que discutamos el concepto de cómo planeamos abordar este problema. Utilizaremos JavaScript interno.
El método sort () está diseñado para tomar una matriz y clasificarla.
utilizando una función personalizada suministrada por el código. En nuestro caso, simplemente queremos clasificarlos alfabéticamente y numéricamente, por lo que solo compararemos los dos elementos que suministra
y devuelva en qué orden deben ir los dos según ese diseño. Debido a que queremos clasificar tanto ascendente como descendente, usaremos una declaración de clase CSS para ver
cuál es el estado actual del ordenamiento por esa columna y revertirlo si es necesario. Una vez que tengamos nuestra matriz en orden usaremos el orden para reinsertar las filas
en la mesa uno por uno. Esto parece mucho, pero debido a lo rápido y rápido que es JavaScript, será muy fácil para el usuario. Todo
esto se vinculará al evento de clic de los encabezados de columna en la tabla.
Como de costumbre, saquemos el código CSS, ya que es el más sencillo.
th.sortable color: # 666; cursor: puntero; texto-decoración: subrayado; th.sortable: hover color: negro; th.sorted-asc, th.sorted-desc color: negro;
Todos nuestros encabezados organizables tendrán una clase de ordenable, y el modificador de desplazamiento en CSS hace que emule un hipervínculo para los usuarios. También estamos aprovechando
la clase de CSS que mencionamos sobre ordenado-asc y ordenado-desc para que podamos mostrarle al usuario la columna actual que está ordenando la tabla. No lo incluí pero
este sería un buen lugar para colocar imágenes de fondo de flechas apuntando hacia arriba y hacia abajo como una indicación visual adicional para el usuario. Ahora pasamos al código JavaScript y al
La complejidad de la clasificación, afortunadamente facilitada con jQuery. El siguiente código pertenece a la función ready () que comenzamos desde el principio. Colocando este derecho
por encima del final de la función es mejor.
// tome todas las filas del encabezado $ ('thead th'). each (function (column) $ (this) .addClass ('sortable'). click (function () var findSortKey = function ($ cell) return $ cell.find ('. sort-key'). text (). toUpperCase () + "+ $ cell.text (). toUpperCase ();; var sortDirection = $ (this) .is ('. sorted-asc ')? -1: 1; // retroceda el árbol y obtenga las filas con datos // para ordenar var $ rows = $ (this) .parent (). Parent (). Parent (). Find (' tbody tr '). get (); // recorre todas las filas y encuentra $ .each ($ rows, function (index, row) row.sortKey = findSortKey ($ (row) .children (' td '). eq (columna));); // comparar y ordenar las filas alfabéticamente $ rows.sort (función (a, b) si (a.sortKey < b.sortKey) return -sortDirection; if (a.sortKey > b.sortKey) return sortDirection; devuelve 0; ); // agregue las filas en el orden correcto al final de la tabla $ .each ($ rows, function (index, row) $ ('tbody'). append (row); row.sortKey = null;); // identificar el orden de clasificación de la columna $ ('th'). removeClass ('sorted-asc sorted-desc'); var $ sortHead = $ ('th'). filter (': nth-child (' + (column + 1) + ')'); sortDirection == 1? $ sortHead.addClass ('sorted-asc'): $ sortHead.addClass ('sorted-desc'); // identificar la columna que se ordenará por $ ('td'). removeClass ('ordenada') .filter (': nth-child (' + (column + 1) + ')') .addClass ('sorteada') ; $ ('. visible td'). removeClass ('impd'); zebraRows ('. visible: even td', 'impd'); ); ); Woo, eso es un montón de código. Vamos a dividir eso en partes considerables. El primer bit de código es agarrar todos los encabezados y hacer un bucle a través de ellos. La primera cosa
Lo que hace es agregar una clase de de ordenable, y comienza con el enlace de clic.
... // tome todas las filas de encabezado $ ('thead th'). Each (function (column) $ (this) .addClass ('sortable'). Click (function () … Tenga en cuenta que esto se puede cambiar fácilmente para permitir que solo ciertas columnas puedan ordenarse eliminando la llamada addClass () y cambiando el selector de 'thead th' a
algo así como 'thead th.sortable'. Por supuesto, esto requiere que especifique manualmente cuáles de sus columnas se pueden ordenar agregando a la
encabezados apropiados en el código HTML.
El siguiente bit de código es una declaración de función vinculada a una variable. Esto puede parecer un poco extraño para aquellos que no están familiarizados con la programación, pero es una práctica común. Esta
nos permite hacer referencia fácilmente a la función específicamente en el contexto del encabezado en el que estamos trabajando. Esa explicación probablemente sea un poco confusa, pero la
El tipo de razonamiento preciso sobrepasa el alcance de este artículo. El punto de la función findSortKey es determinar qué columna estamos clasificando por, podemos hacer esto
porque sabemos que el elemento en el que hicieron clic es el mismo índice en la tabla para todas las columnas que compararemos. Por ejemplo, si hacen clic en el tercer encabezado nos
desea mirar la tercera columna de cada fila para comparar qué orden colocar las filas. Después de declarar esta función, determinamos el orden de clasificación, ascendiendo
o descendiendo. Esto se hace buscando el nombre de clase de 'ordenado-asc' en el encabezado de la tabla; si está allí, sabemos que actualmente está ordenado como ascendente y
Necesitamos hacer descendente, de lo contrario usaremos el valor predeterminado de ascendente. Esto se encarga del caso en el que está descendiendo y tenemos que hacerlo ascender de nuevo..
Este bit de código devuelve 1 o -1, explicaremos por qué más adelante..
... var findSortKey = function ($ cell) return $ cell.find ('. Sort-key'). Text (). ToUpperCase () + "+ $ cell.text (). ToUpperCase ();; var sortDirection = $ (this) .is ('. sorted-asc')? -1: 1;… Ahora queremos obtener esa columna específica de cada fila y colocarla en una matriz, esto se hace usando el método jQuery de
get () que toma las filas y las coloca en una matriz que la función sort () puede comprender. Porque la corriente
Selector fue el encabezado de la tabla, tenemos que retroceder en el árbol DOM 3 lugares para encontrar tabla> tbody> tr> td. Parece un poco complejo, pero en realidad es simple. Después
que recorramos cada una de las filas que acabamos de encontrar y encontramos la columna que queremos usar en la clasificación. Esto se hace verificando si su índice (el número de lugares
comenzando en 0 desde la primera columna de la tabla) es igual al índice del encabezado en el que se hizo clic. Esto luego se pasa a la función findSortKey para que podamos
luego establezca un atributo personalizado llamado sortKey que contenga el encabezado de columna por el que estamos ordenando y el texto de la columna actual que estamos buscando.
establecido en mayúsculas para que el orden no distinga mayúsculas de minúsculas. Esta es una forma en que agilizamos la clasificación para que sea más receptivo a grandes cantidades de datos..
... // para clasificar var $ rows = $ (this) .parent (). Parent (). Parent (). Find ('tbody tr'). Get (); // recorre todas las filas y encuentra $ .each ($ rows, función (índice, fila) row.sortKey = findSortKey ($ (row) .children ('td'). eq (column));); ... Luego viene la función sort () real sobre la que he estado hablando. Esto se llama en la matriz de filas que creamos usando get (). El único parámetro que pasamos es el
Función que queremos determinar la clasificación. Esa función recibe dos atributos para comparar y devuelve 1 si el primero es mayor, -1 si el segundo es excelente y 0
si son iguales Aquí es donde la variable sortDirection entra en juego porque la forma en que funciona es que configuramos 1 o -1 y luego multiplicamos la
1 o -1 la función debe regresar por sortDirection, logrando el efecto ascendente / descendente que deseamos.
... // comparar y ordenar las filas alfabéticamente $ rows.sort (función (a, b) si (a.sortKey < b.sortKey) return -sortDirection; if (a.sortKey > b.sortKey) return sortDirection; devuelve 0; );…
El siguiente bit de código simplemente agrega cada fila de la matriz ahora ordenada de nuevo a la estructura DOM. Esto se hace con la función de añadir que es agradable porque
no copia la fila y la coloca al final, de hecho, la elimina del lugar actual en el DOM y de los lugares donde la contamos, en este caso al final de la
mesa. Una vez que haya hecho esto para cada elemento de la matriz, habrá movido cada fila a su nuevo lugar. También para hacer un poco de limpieza eliminamos el sortKey.
atributo que establecimos anteriormente.
... // agregue las filas en el orden correcto al final de la tabla $ .each ($ rows, function (index, row) $ ('tbody'). Append (row); row.sortKey = null;) ;… Ahora nos estamos moviendo a la etapa de limpieza de nuestra función ya que todo el trabajo pesado se ha realizado. A continuación cogemos todas las celdas del cuerpo de la mesa, eliminamos cualquier
persisten los atributos ordenados en las declaraciones de clase, y luego filtran todas las columnas excepto las que tienen el mismo índice que nuestro encabezado ordenado y aplican el 'ordenado'
clase para ellos. Esto es bueno para la orientación de CSS si, por ejemplo, quisiéramos hacer la columna que ordenamos con un color diferente, podríamos declarar este CSS:
... ordenados color de fondo: verde; …
Lo último que hacemos es eliminar cualquier declaración 'impar' de CSS y volver a aplicar las filas de cebra como lo hicimos en la parte del filtro.
... $ ('. Visible td'). RemoveClass ('impd'); zebraRows ('. visible: even td', 'impd');… Así es como hacemos la clasificación muy simple. Es importante tener en cuenta que esto solo ordenará los elementos alfabética o numéricamente y no funciona con fechas o moneda
por ejemplo. Eso requiere un manejo más especializado que está más allá de nuestros objetivos de manipulación simple de tablas..
En este artículo, aprendimos a rodar nuestro propio código de manipulación de tablas usando jQuery. Esto es
Muy conveniente tanto para el usuario como para nosotros. El usuario obtiene los controles esperados para clasificar y filtrar los datos y tenemos un código que es pequeño y fácil de usar.
entender. Como lo escribimos nosotros mismos, ahora podemos extenderlo a nuestra manera. Nuestro método es excelente para la manipulación simple, pero si necesita el fregadero de la cocina, le recomiendo echar un vistazo a la
Data Tables plugin para jQuery. Me encantaría responder a cualquier pregunta en los comentarios o en Twitter.
(@noahendrix). Gracias por leer!
