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

Tabelle sortieren

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

Sortierbare Tabelle in einer nPage Seite

In manchen Fällen möchte man dem Besucher der Webseite einen besseren Komfort bei der Betrachtung von Tabellen bereitstellen. Eine Möglichkeit, vor allem bei umfangreichen Tabellen, ist die Sortierbarkeit.

Diese Beispieltabelle lässt sich nach den Inhalten der Spalten Clanmitglied oder Ehre oder Level sortieren, in dem man einfach in eines der Überschriftenfelder klickt.

Clanmitglied Ehre Level
Schöner Bernd 84.3 3
Detlef Datenklau 87.8 2
Mein Bruder 69 4711
Ich Ich 97.5 999

Einbauanleitung

Zunächst benötigt man die JavaScript-Datei tablesort1_extern.js. Die kann man hier herunterladen. Es handelt hierbei um ein zip-Archiv. Das muss man auf dem Computer entpacken. Enthalten ist nur die Datei tablesort1_extern.js. Die muss bei nPage hoch geladen werden.

Jetzt öffnet man die nPage-Seite mit der Tabelle. Zunächst wird ganz normal eine Tabelle eingefügt. Beim Erstellen der Tabelle mit dem nPage Editor kann man im Reiter Erweitert eine ID einfügen. Man kann diese ID auch im Quellcodemodus hinzufügen. Auf jeden Fall muss im Endeffekt so eine ID vorhanden sein, die erste Zeile der Beispieltabelle oben sieht z.B. so aus:

<table border="1" cellpadding="0" cellspacing="0" id="tabelle1" width="100%">

Jetzt schalten wird den Editor mit der Tabellenseiten in den Quellcodemodus und fügen zunächst ganz am Anfang einen Link zu der hoch geladenen JavaScript-Datei tablesort1_extern.js ein. Das sieht dann so aus:

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

Die genaue Adresse der JavaScript-Datei muss natürlich angepasst werden. Für x,y und z stehen dann Zahlen. Ganz am Ende des Quellcodes der Seite (zumindest aber hinter der Tabelle) fügt man ein:

<script type="text/javascript">
if (domok) initTable("tabelle1");
</script>

Wichtig ist hier, dass die ID (im Beispiel tabelle1) mit der zuvor direkt in der Tabelle vergebenen übereinstimmt.

Weitere Möglichkeiten

Es ist möglich, die Überschriftzeile der Tabelle mit Hilfe des JavaScriptes farblich anzupassen. Siehe dazu das Beispiel weiter unten. Diese Anpassungen kommen allerdings dann nicht zur Wirkung, wenn es in der (nPage-) Designvorlage andere Einstellungen gibt, die Vorrang haben.

Mehrere Tabellen in einer Seite

Es ist ohne weiteres möglich, mehrer Tabellen in einer Seite einzufügen. Wichtig dabei ist nur, dass für die beiden Tabellen unterschiedliche ID verwendet werden. Mein individueller JavaScript-Code für diese Seite sieht so aus.

<script type="text/javascript">
if (domok) initTable("tabelle1");
titleFace = 'i';//i-kursiv, b-fett
defaultColor = 'white';//Standardfarbe
selectedColor = '#f00';//Farbe bei Mausberuehrung
if (domok) initTable("tabelle2");
</script>

Die zweite Tabelle mit Grafiken:

Vorname Nachname Passbild
Peter Lustig
Petra Traurig

Viele Tabellen in einzelnen Seiten

Wenn man das Sortierscript auf mehreren Textseiten bei nPage Nutzen will, kann man den Einbau etwas vereinfachen, in dem man den Verweis zur Datei tablesort1_extern.js nicht direkt in der Textseite, sondern über Einstellungen › Homepage-Einstellungen › Sitewide im Feld Anfang jeder Seite einfügt.

Grenzen

Das hier verwendete JavaScript ist zwar schlank und wenig aufwendig, es hat jedoch auch seine Grenzen. In der obigen Tabelle 2 habe ich in die letzte Spalte Grafiken eingefügt. Der Inhalt dieser 3. Spalte wird beim Klick auf eine der ersten beiden Spalten nicht mit sortiert.

Wenn man eine Tabelle mit Grafiken sortieren will, dann muss man also etwas mehr Power einsetzen. Da kommt die JavaScript-Bibliothek jQuery und ein für diese Bibliothek geschriebenes Plugin zum Zuge. Wie das funktioniert habe ich auch der Seite Tabelle mit jQuery sortieren beschrieben.

Fragen

Bei Fragen zum Einbau kannst du dich als nPage Nutzer im nPage Forum in diesem Bereich melden. Ansonsten schicke eine Nachricht über das Kontaktformular an mich, Stichwort Designpatch Tabelle.

{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}
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. Jetzt wird auch auf andere Anbieter von Websitebaukästen (z.B. Jimdo, Webnode, SnackWebsites) eingegangen.

Beitrag lesen


Bewertung: (Keine Bewertung)

 
 
Kommentare
 
Keine Kommentare vorhanden.
 
 
Kommentar verfassen
 
Name:
E-Mail:
Betreff:
Kommentar :
 
 
{/if} Zum Seitenanfang
nPage.de-Seiten: Erster-DANIELA ALFINITO-Fanclub | https://www.herkules12.de