Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Tabelle sortieren mit jQuery

{$debug=1} {if {$page_title}=="Orginaldesign ansehen"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Fußleiste"} {head} {/head} {elseif {$page_url}|contains:'preview'}

Vorschau

{elseif {$page_url}|contains:'136'} {head} {/head} {else} {head} {/head}
{/if}

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>

 

{if {$page_title}=="Orginaldesign ansehen"} {elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"} {elseif {$page_title}=="Orginaldesign mit Fußleiste"}

In diese Fussleiste kann man allen möglichen Kram einbauen: Links zu anderen Website, irgendwelche Like-Buttons, die News, ja wahrscheinlich sogar das Kontaktformular. Das ist dann nur noch eine sache der Formatierung.

{else}
Galerie in News (16.07.2013 12:22:00)

Kann man eine NPage galerie in die News einfügen? Diese Frage stellte eine NPage Nutzerin im Forum:

http://forum.npage.de/sonstige-extras/40648-galerie-den-news.html

Ich habe das getestet. In der Kurzversion der News klappt es zwar nicht, aber in der vollständigen Version geht es.

[galerie_380505]

 


Bewertung: (Keine Bewertung)

 
 
Kommentare
 
Keine Kommentare vorhanden.
 
 
Kommentar verfassen
 
Name:
E-Mail:
Betreff:
Kommentar :
 
 
{/if} Zum Seitenanfang
nPage.de-Seiten: tolle Ferienstudios in Euronat | Jeder Tag bringt neue Hoffnung