Tabla con ordenamiento, utilizando css y jquery
En esta ocasión quiero hacer algo simple: tomar una tabla en html y habilitarle el ordenamiento de columnas (cuando se le da clic al nombre de la columna), sin utilizar grandes y complicadas funciones de jquery o librerías de terceros.
El objetivo es hacer algo que nos sea útil, pero también sencillo. El resultado final de este post se encuentra en codepen.
Bien, comencemos creando una tabla en html (para este caso utilice bootstrap, pero no importa si en lugar de eso tenemos nuestro propio estilo css definido).
<table class="table"> <thead> <tr> <th>Columna 1</th> <th>Columna 2</th> <th>Columna 3</th> <th>Columna 4</th> <th>Columna 5</th> </tr> </thead> <tbody> <tr> <td>Valor 1</td> <td>Valor 2</td> <td>Valor 3</td> <td>Valor 4</td> <td>8</td> </tr> <tr> <td>Valor 5</td> <td>Valor 1</td> <td>Valor 8</td> <td>Valor 2</td> <td>3</td> </tr> <tr> <td>Valor 3</td> <td>Valor 4</td> <td>Valor 9</td> <td>Valor 1</td> <td>11</td> </tr> </tbody> </table>
Lo importante en este punto es que utilicemos bien las etiquetas thead y th (marcadas con negrita) porque son las que nos servirán más adelante para habilitar la nueva funcionalidad de ordenamiento.
[banner id=”1861″]
En JSBIN se encuentra este código con el que iniciamos.
Nuestro código en JQuery, consistirá de:
- Enviar el contenido de la tabla (que está en html) a un arreglo.
- Ordenar el arreglo (ascendente o descendentemente)
- Mostrar en el encabezado de nuestra tabla cuál es el orden que está aplicado.
Para el punto 1 utilizaremos el evento clic de todos los elementos th que estén en nuestra página (por esto era importante utilizar bien las etiquetas thead y th)
$('th').click(function() { var table = $(this).parents('table').eq(0) var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index())) this.asc = !this.asc if (!this.asc) { rows = rows.reverse() } for (var i = 0; i < rows.length; i++) { table.append(rows[i]) } setIcon($(this), this.asc); });
Esta función (que será la principal) se encargará de llamar a otras 3 funciones: comparer, getCellValue y setIcon. A continuación se encuentra el código de estas 3 columnas y una breve descripción de lo que hacen.
// Para comparar los valores de la tabla entre sí function comparer(index) { return function(a, b) { var valA = getCellValue(a, index), valB = getCellValue(b, index) return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB) } }
// Obtiene los valores de cada celda function getCellValue(row, index) { return $(row).children('td').eq(index).html() }
// Muestra gráficamente qué ordenamiento se está aplicando function setIcon(element, asc) { $("th").each(function(index) { $(this).removeClass("sorting"); $(this).removeClass("asc"); $(this).removeClass("desc"); }); element.addClass("sorting"); if (asc) element.addClass("asc"); else element.addClass("desc"); }
Si vemos ahora nuestro ejemplo en JSBIN, podemos ver que ya nos ordena la tabla al hacer clic sobre el titulo de cada columna, sin embargo gráficamente el usuario no sabe que es lo que está pasando.
Así que, para ayudar al usuario recurriremos a CSS:
table tr th { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.sorting { background-color: #D4D4D4; }
.asc:after { content: ' ↑'; }
.desc:after { content: " ↓"; }
Ahora si, en nuestra versión final (en JSBIN), al hacer clic sobre la columna se pintará una flecha que nos dirá si se está aplicando un ordenamiento ascendente o descendente:
NOTA FINAL: Este ejemplo lo arme de varias respuestas que vi en stackoverflow, más algunas adaptaciones que yo le hice 🙂
Espero que les sirva.
[banner id=”1861″]
Está chilero Wanderson, lo voy a probar.
Lo mejor es que podes agregarlo sin afectar el diseño de lo que ya tenes, aunque no uses bootstrap.
Excelente, muchas gracias
Buenas noches amigo, muy interesante esto, espor eso que debo preguntarte ¿qué hago cuando tengo más de 2 tablas en mi aplicación y cómo vinculo esta solución con angularjs?.
Saludos
me arroja el siguiente error y no realiza el ordenamiento
DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:8000/static/js/app.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILUR
Excelente aplicación. Es lo que yo buscaba, algo sencillo y sin librerías extras