Tabelle sortieren mit jQuery

Im Beitrag Tabelle sortieren habe ich beschrieben, wie man mit einem realtive einfachen und schlanken JavaScript eine Tabelle sortieren kann. Dieses Script hat allerdings wie dort erwähnt den Nachteil, dass eventuell in der Tabelle enthaltene Grafiken nicht mit sortiert werden.

Für solche Tabellen bietet sich eine andere Lösung an: der Einsatz des jQuery Plugins TableSorter.

Beispiel

Zunächst eine kleine Beispieltabelle, die auch Grafiken enthält. Beim Klick auf die erste oder zweite Spalte wird auch die dritte Splate mit den Grafiken mit sortiert.

Vorname Nachname Passbild
Peter Alta Badia
Petra Stelvio
Paul Fischbild

Einbau bei nPage

Zunächst lädt man von der Tablesorter Homepage das Download-Archiv herunter und entpackt es auf dem PC. Die daint enthaltenen Dateien jquery.tablesorter.js und jquery-latest.js lädt man bei nPage hoch. jquery-latest.js ist aber nur erforderlich, wenn man nicht bereits aus anderen Gründen die jQuery-Bibliothek eingebunden hat.

Wenn man mit einer nPage Designvorlage arbeitet fügt man in Einstellungen › Homepage-Einstellungen › Header-Bereich im Feld Eigener, zusätzlicher HTML-Code (zwischen <head> und </head>) den folenden Code ein:

<script type="text/javascript" src="http://filex.npage.de/yyyyyy/zz/html/jquery-latest.js">
</script>
<script type="text/javascript" src="http://filex.npage.de/yyyyyy/zz/html/jquery.tablesorter.js">
</script>

Achtung, der genaue Ablageort unterschiedet sich von Account zu Account und muss individuell angepasst werden.

Wenn man ein eigenes Design nutzt, kann man man den Code auch direkt zwischen <head> und </head> einfügen.

In beiden Fällen steht die Funktion nun für alle Seiten zur Verfügung. Jetzt fügt man die Tabelle in die entsprechnde Textseite ein. Dabei ist zu beachten, dass die Tabelle eine Kopfzeile enthalten muss. das wird durch das Tabellenwerkzeug des nPage Editors auch unterstützt. Außerdem muss eine ID vergeben werden.

Der Quellcode für meine Beispieltabelle sieht so aus:

<table border="1" cellpadding="1" cellspacing="1" id="tabelle1" style="width:500px;">
    <thead>
        <tr>
            <th>
                Vorname</th>
            <th>
                Nachname</th>
            <td>
                Passbild
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                Peter
            </td>
            <td>
                Alta Badia
            </td>
            <td>
                <img alt="" height="120" src="..." width="160" />
            </td>
        </tr>
        <tr>
            <td>
                Petra
            </td>
            <td>
                Stelvio
            </td>
            <td>
                <img alt="" height="120" src="..." width="160" />
            </td>
        </tr>
        <tr>
            <td>
                Paul
            </td>
            <td>
                Fischbild
            </td>
            <td>
                <img alt="" height="120" src="..." width="160" />
            </td>
        </tr>
    </tbody>
</table>

In den Zeilen 8 und 10 habe ich th wieder zu td geändert, weil die Bildspalte selbst nicht Grundlage der Sortierung sein kann.

Am Ende jeder Textseite mit einer sortierbaren Tabelle muss im Quellcodemodus eingefügt werden:

<script type="text/javascript">
$(document).ready(function()
    {
        $("#tabelle1").tablesorter();
    }
);
</script>

Zeile 4 enthält die ID der Tabelle. Wenn eine Textseite mehrere sortierbare Tabellen enthalten soll, dann muss Zeile 4 mehrfach eingefügt werden, jedoch unbedingt mit unterschiedlicher ID.

Nicht unbedingt erforderlich aber durchaus benutzerfreundlich ist es, wenn man sehen kann, nach welcher Spalte gerade sortiert wird und ob dies aufsteigend oder absteigend erfolgt. Ich habe daher direkt in diese Textseite einen kleinen Stylesheet-Abschnitt eingefügt, der aber bei einem umfassenden Einsatz auch in Sidewide stehen kann. Dieser Abschnitt sieht so aus:

<style type="text/css">
th.header{
height:20px;
cursor:pointer;
}

.headerSortDown{
color:red;
}

.headerSortDown:after{
content:"↓"/*2193*/
}

.headerSortUp{
color:green;
}

.headerSortUp:after{
content:"↑"/*2191*/
}</style>

 

Partnerwebsites

Websites mit Mobirise

  1. Startseite der Mobirise Extension Demo Website auf github.bpgs.de
  2. Übersicht zu den Elementen des Themes Mobirise4 in Mobirise 4, Version 4.7.7 auf demo-zu-netcup.9f8.de
  3. Gesamtübersicht zu den Designblöcken des Mobirise5 Themes AMP auf mobirise5-theme-amp.9f8.de
  4. Mobirise4 mit dem Theme PurityM auf mein-wunschname.de.cool
  5. EASY TO USE! erstellt mit Mobirise 4.4.1 und dem Theme default auf mein-wunschname.webspace.rocks
  6. MOBIRISE3 THEME MOBIRISE3 auf lc-pico-phpfriends.bpgs.de
  7. Website erstellt mit Mobirise3 und dem Theme Mobirise(auch unter dem Namen default) auf lc-ver-bummel.bpgs.de

Neuigkeiten

Kategorie: alle Artikel (9) | Diese Website (5) | NPage (2) | Webdesign (2)

< 1 2 3 >

Tabellensortierung (16.01.2014 11:01:00)

Die Beschreibung zum Einbau einer Tabellensortierung wurde verbessert. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
News und Blogs (14.10.2013 11:51:00)

Der Beitrag zur Erstellung von News und Blogs bei Npage und anderen Anbietern von Websitebaukästen wurde überarbeitet und erweitert. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
Galerie in News (16.07.2013 12:22:00)

Kann man eine NPage galerie in die News einfügen? Ja, man kann. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 

< 1 2 3 >

Zum Seitenanfang