Tabla HTML de ordenación de JavaScript

A menudo nos encontramos con situaciones en las que queremos que nuestras tablas sean interactivas. Es posible que queramos ordenarlos con solo hacer clic en la columna o cualquier otro método. HTML no tiene ninguna capacidad de programación, por lo que tenemos que usar JavaScript para ordenar una tabla HTML. Desafortunadamente, no existe un método incorporado que nos ayude a ordenar el array. Por lo tanto, escribimos nuestro método personalizado aprovechando las capacidades de manipulación DOM y las funciones de comparación. Este tutorial enseña cómo ordenar tablas HTML usando JavaScript.

Ordenar tablas HTML usando JavaScript

El método definido por el usuario utiliza las siguientes dos funciones auxiliares para ordenar el array.

• getCellValue()

Una función para obtener el contenido de una celda dada la fila de la tabla y el índice de columna.

Usamos la propiedad children de la fila de la tabla para seleccionar la columna i-ésima usando tr.children[i] y luego usamos su propiedad innerText o textContent para obtener el contenido real almacenado. Una vez que obtenemos el contenido real en una celda, podemos usar un comparador personalizado para comparar y ordenar estos valores.

• comparer()

Una función para comparar los valores de dos elementos en una tabla determinada.

Primero obtenemos el contenido de las celdas usando la función getCellValue() con un índice de fila y columna específico. Luego verificamos que ambos sean enteros o cadenas válidos y luego los comparamos para encontrar el orden correcto.

Algoritmo

Código

const getCellValue = (tableRow, columnIndex) =>
    tableRow.children[columnIndex].innerText ||
    tableRow.children[columnIndex].textContent;

const comparer = (idx, asc) => (r1, r2) =>
    ((el1, el2) => el1 !== '' && el2 !== '' && !isNaN(el1) && !isNaN(el2) ?
         el1 - el2 :
         el1.toString().localeCompare(el2))(
        getCellValue(asc ? r1 : r2, idx), getCellValue(asc ? r2 : r1, idx));

// do the work...
document.querySelectorAll('th').forEach(
    th => th.addEventListener(
        'click', (() => {
          const table = th.closest('table');
          Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
              .sort(comparer(
                  Array.from(th.parentNode.children).indexOf(th),
                  this.asc = !this.asc))
              .forEach(tr => table.appendChild(tr));
        })));

Todos los navegadores principales admiten todos los métodos discutidos anteriormente.