Tabla HTML de ordenación de JavaScript

Harshit Jindal 12 octubre 2023
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

  • Permite hacer clic en todos los encabezados de la tabla agregando un detector de eventos.
  • Encuentra todas las filas en la columna seleccionada excepto la primera fila.
  • Utiliza la función sort() de JavaScript con el comparer() para ordenar los elementos.
  • Inserta las filas ordenadas nuevamente en la tabla para obtener la tabla ordenada final como salida.

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.

Harshit Jindal avatar Harshit Jindal avatar

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn

Artículo relacionado - JavaScript Table