Wie man den Inhalt einer Tabelle sortiert

Das Hinzufügen sortierbarer Spalten zu Ihren Tabellen ermöglicht es den Lesern, den Tabelleninhalt neu zu ordnen, indem sie auf eine beliebige Spaltenüberschrift klicken. Ein einmaliges Klicken auf eine Kopfzeile sortiert aufsteigend (▴); Ein erneutes Klicken sortiert absteigend (▾). Die Implementierung erfordert zwei Ergänzungen zu deinen benutzerdefinierten CSS- und JavaScript-Einstellungen: einen CSS-Snippet, der die Sortierindikatoren gestaltet, und einen JavaScript-Snippet, der die Sortierlogik übernimmt.

Wann sortierbare Tabellen verwendet werden sollten

• Referenztabellen mit vielen Zeilen: Sortieren ermöglicht es den Lesern, schnell den gesuchten Eintrag zu finden, anstatt die gesamte Tabelle zu durchsuchen.
• Vergleichstabellen: Leser können nach beliebigen Attributen (Preis, Name, Verfügbarkeit von Funktionen) sortieren, um Optionen nach ihren eigenen Bedingungen zu vergleichen.
• Datenlastige Artikel: Sortieren reduziert die Notwendigkeit, dass Leser eine gefilterte oder neu geordnete Version der Daten anfordern müssen.

Wie man sortierbare Spalten zu Tabellen hinzufügt

Dies erfordert zwei Schritte: das Hinzufügen des CSS für visuelle Indikatoren und dann das JavaScript für die Sortierlogik.

Fügen Sie das CSS hinzu

1. Im Knowledge Base-Portal gehen Sie zu Einstellungen > Knowledge Base-Seite > Custom CSS & JavaScript.

2. Wählen Sie den CSS-Tab und fügen Sie den folgenden Ausschnitt ein:

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. Klicken Sie auf Speichern.

JavaScript hinzufügen

1. Auf derselben Seite mit benutzerdefinierten CSS- und JavaScript-Einstellungen wählen Sie den JavaScript-Tab .
2. Fügen Sie folgenden Ausschnitt ein:

$( "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);
    });
});

3. Klicken Sie auf Speichern.

Ergebnis

Nachdem Sie beide Ausschnitte gespeichert haben, werden alle Tabellenspalten-Überschriften auf Ihrer Knowledge Base-Seite anklickbar. Ein Klicken auf eine Kopfzeile sortiert die Tabellenzeilen nach dieser Spalte. Eine Sortierrichtungsanzeige erscheint in der aktiven Spaltenkopfzeile.