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.

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