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:

1. Enviar el contenido de la tabla (que está en html) a un arreglo.
2. Ordenar el arreglo (ascendente o descendentemente)
3. 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″]