---
title: "Wie man den Inhalt einer Tabelle sortiert"
slug: "how-to-sort-the-contents-of-a-table"
description: "Sorting is a great option to have when you provide data artifacts in the table. "
tags: ["Customization"]
updated: 2026-06-22T08:43:25Z
published: 2026-06-22T08:43:25Z
canonical: "docs.document360.com/how-to-sort-the-contents-of-a-table"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

 HINWEIS

Diese Implementierung gilt für **alle Tabellen** auf Ihrer Knowledge Base-Website. Das Sortieren wird ausgelöst, indem der Leser auf eine beliebige Spaltenkopfzeile klickt. Das Sortiersymbol in der Überschrift zeigt die aktuelle Sortierrichtung an – aufsteigend (▴) oder absteigend (▾).

---

## 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**.

![Knowledge base site settings page showing the Custom CSS and JavaScript option in the left navigation.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&%20js.png)

1. 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);
}
```

1. Klicken **Sie auf Speichern**.

![Custom CSS editor showing the sort table CSS snippet pasted in the CSS tab with the Save button visible.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Sort%20table%20content%20-%20custom%20css.png)

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

1. Klicken **Sie auf Speichern**.

![Custom JavaScript editor showing the sort table JavaScript snippet pasted in the JavaScript tab with the Save button visible.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Sort%20table%20content%20-%20custom%20js.png)

---

## 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.

![Knowledge Base site table showing clickable column headers with ascending sort indicator applied to the active column.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/1_Screenshot-sort_the_contents_of_a_table.png)