Tableau HTML de tri JavaScript

Nous rencontrons souvent des situations où nous souhaitons rendre nos tables interactives. Nous pouvons vouloir les trier simplement par un clic sur la colonne ou toute autre méthode. HTML n’a aucune capacité de programmation, nous devons donc utiliser JavaScript pour trier un tableau HTML. Malheureusement, il n’y a pas de méthode intégrée qui nous aide à trier le tableau. Par conséquent, nous écrivons notre méthode personnalisée en tirant parti des capacités de manipulation du DOM et des fonctions de comparaison. Ce tutoriel explique comment trier des tableaux HTML à l’aide de JavaScript.

Trier les tableaux HTML à l’aide de JavaScript

La méthode définie par l’utilisateur utilise les deux fonctions d’assistance suivantes pour trier le tableau.

• getCellValue()

Une fonction pour obtenir le contenu d’une cellule en fonction de l’index de ligne et de colonne du tableau.

Nous utilisons la propriété children de la ligne du tableau pour sélectionner la colonne ith à l’aide de tr.children[i], puis utilisons sa propriété innerText ou textContent pour obtenir le contenu réel stocké. Une fois que nous avons obtenu le contenu réel d’une cellule, nous pouvons utiliser un comparateur personnalisé pour comparer et trier ces valeurs.

• comparer()

Une fonction pour comparer les valeurs de deux éléments dans une table donnée.

Nous obtenons d’abord le contenu des cellules à l’aide de la fonction getCellValue() avec un index de ligne et de colonne spécifié. Nous vérifions ensuite que les deux sont des entiers ou des chaînes valides, puis les comparons pour trouver le bon ordre.

Algorithme

Code

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));
        })));

Tous les principaux navigateurs prennent en charge toutes les méthodes décrites ci-dessus.