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

{$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}

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

< 1 2 3 >

Vergleich zum Orginal (24.04.2013 12:09:00)

Damit man meine Designanpassung mit dem Orginal vergleichen kann, habe ich einige Seiten im wesentlichen unveränder gelassen. das betrifft (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
Grunddesign anpassen (14.04.2013 21:02:00)

So wie auf dieser Website die NPage Designvorlage Plus 135 Grundlage für individuelle Anpassungen ist habe ich auf meiner Reiseberichtswebsite (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
Umbau begonnen (12.04.2013 20:56:00)

Ursprünglich wurde auf dieser Website dargestellt, wie man die NPage Designvorlage o08 durch individuelle Einstellungen anpassen kann. Jetzt gibt es bei NPage (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 

< 1 2 3 >

{/if} Zum Seitenanfang