sortierbare Tabellen (für Gäste offen)

Kursthemen

• Allgemeines

  Alles einklappen Alles aufklappen

• sortierbare Tabelle mit Vorname, Nachname, Fächer
  • Z.	Vorname	Nachname	Fach 1	Fach 2
    1	Peter	Pan	Physik	Mathe
    2	Max	Mustermann	Bio	Chemie
    3	James	Bond	Kunst	Sport

    
    Quellcode ...

    <table class="sortable table table-hover m-3 shadow w-75">
        <thead style="background-color: #00a5bb; color: #f0f0f0;">
            <tr>
                <th>Z.</th>
                <th>Vorname</th>
                <th>Nachname</th>
                <th>Fach 1</th>
                <th>Fach 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Peter</td>
                <td>Pan</td>
                <td>Physik</td>
                <td>Mathe</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Max</td>
                <td>Mustermann</td>
                <td>Bio</td>
                <td>Chemie</td>
            </tr>
            <tr>
                <td>3</td>
                <td>James</td>
                <td>Bond</td>
                <td>Kunst</td>
                <td>Sport</td>
            </tr>
        </tbody>
    </table> ...

    
    
    
    

• Abschnitt 2
  • Z.	Vorname	Nachname	Fach 1	Fach 2
    1	Peter	Pan	Physik	Mathe
    2	Max	Mustermann	Bio	Chemie
    3	James	Bond	Kunst	Sport

    Wo findet man die Quellen? https://www.kryogenix.org/code/browser/sorttable/
    

    <table class="sortable" border="1">
    <thead>
    <tr><th>Z.</th><th>Vorname</th><th>Nachname</th><th>Fach 1</th><th>Fach 2</th></tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>Peter</td>
    <td>Pan</td>
    <td>Physik</td>
    <td>Mathe</td>
    </tr>
    <tr>
    <td>2</td>
    <td>Max</td>
    <td>Mustermann</td>
    <td>Bio</td>
    <td>Chemie</td>
    </tr>
    <tr>
    <td>3</td>
    <td>James</td>
    <td>Bond</td>
    <td>Kunst</td>
    <td>Sport</td>
    </tr>
    </tbody>
    </table>

    additionalhtmlhead

    
    

    
    <style>

    table.sortable thead {
        background-color:#eee;
        color:#666666;
        font-weight: bold;
        cursor: default;
    }

    table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
            content: " \25B4\25BE"
    }

    tr:hover {
        background-color: #eee;
    }

    
    </style>

• Aktivität "Datenbank" mit sortierbarer Tabelle
  • 

    Aktivität "Datenbank" mit sortierbarer Tabelle
  • In der Vorlage der Tabellenansicht muss man den Editor ausschalten!!!

    Dann die Tabelle analog zu diesem Beispiel konfigurieren:

    
    

    Wichtig ist die Tabellen-Definition mit Portable!!!!

    <table class="sortable" border="1px">