Hoe sorteer je de inhoud van een tabel?

Sorteren is een uitstekende optie als je data-artefacten in de tabel toevoegt. Volg de onderstaande oplossing om een sorteeroptie te hebben voor alle tabellen in je kennisbank.

Oplossing

1. Navigeer naar Instellingen () > Kennisbanksite > Site aanpassen > Aangepaste CSS en JavaScript in de Kennisbankportal.

   

2. Klik vanuit het linker navigatiepaneel op het CSS-tabblad en plak het volgende CSS-fragment:

table th {
    cursor: pointer;
}

table .th-sort-asc::after {
    content: "\25b4";
}

table .th-sort-desc::after {
    content: "\25be";
}

table .th-sort-asc::after,
table .th-sort-desc::after {
    margin-left: 5px;
}

table .th-sort-asc,
table .th-sort-desc {
    background: rgba(0, 0, 0, 0.1);
}

3. Klik op Opslaan.

4. Navigeer naar Instellingen () > Kennisbanksite > Site aanpassen > Aangepaste CSS en JavaScript in de Kennisbankportal.

5. Klik in het linker navigatiepaneel op JavaScript.

6. Plak het onderstaande codefragment:

$( "table" ).addClass("table-sortable");

/**
 * Sorts a HTML table.
 * 
 * @param {HTMLTableElement} table The table to sort
 * @param {number} column The index of the column to sort
 * @param {boolean} asc Determines if the sorting will be in ascending
 */
function sortTableByColumn(table, column, asc = true) {
    const dirModifier = asc ? 1 : -1;
    const tBody = table.tBodies[0];
    const rows = Array.from(tBody.querySelectorAll("tr"));

    // Sort each row
    const sortedRows = rows.sort((a, b) => {
        const aColText = a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
        const bColText = b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();

        return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier);
    });

    // Remove all existing TRs from the table
    while (tBody.firstChild) {
        tBody.removeChild(tBody.firstChild);
    }

    // Re-add the newly sorted rows
    tBody.append(...sortedRows);

    // Remember how the column is currently sorted
    table.querySelectorAll("th").forEach(th => th.classList.remove("th-sort-asc", "th-sort-desc"));
    table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-asc", asc);
    table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-desc", !asc);
}

document.querySelectorAll(".table-sortable th").forEach(headerCell => {
    headerCell.addEventListener("click", () => {
        const tableElement = headerCell.parentElement.parentElement.parentElement;
        const headerIndex = Array.prototype.indexOf.call(headerCell.parentElement.children, headerCell);
        const currentIsAscending = headerCell.classList.contains("th-sort-asc");

        sortTableByColumn(tableElement, headerIndex, !currentIsAscending);
    });
});

6. Klik op Opslaan.

   

OPMERKING

Om de kolom van de tabel te sorteren, moet de lezer op de kolomkop klikken en wordt de sortering toegepast. Het sorteerpictogram in de kolomkop toont het sorteertype (oplopend of dalend).

Uitkomst