Tutorials von Thomas Frei-Herrmann

Tabellen-Sortierung Tutorial 1

Bitte ladet Euch die Skripte von http://yoast.com/articles/sortable-table/ herunter und entpackt diese .zip Datei. Ihr werdet folgende Dateien, die Ihr benötigt, vorfinden:

• example.html - Beispiel-Seite
• example.css - CSS-Datei mit Klassen zur Darstellung der Tabelle (ich habe diese hier umbenannt in “sortable.css”)
• sortable.js - Javascript-Datei mit allen Funktionen zum Sortieren
• Drei .gif Bilder - zur Darstellung der Pfeile

Zunächst kopiert Ihr alle diese Dateien (bis auf die Beispiel-Seite “example.html”) in Euren lokalen Ordner “Assets”, also bei Windows XP liegt dieser dann ungefähr hier:

C:\Dokumente und Einstellungen\Admin\Eigene Dateien\NetObjects Fusion 12.0\User Sites\ProjektName\Assets

... und bindet die .css und .gif Dateien in Eurer “Assets-Verwaltung” ein, so wie ich es hier erkläre.

Die .js Datei bindet Ihr in dem Fenster “Master-Rahmen-Eigenschaften” ein, so wie ich es hier erkläre.

Dadurch werden alle diese Dateien von NOF automatisch mit in die richtigen Ordner publiziert.

Nun zieht Ihr Euch in Eurem Layout ein Textfeld auf und kopiert Euch aus der Beispiel-Seite “example.html” zunächst mal die Tabelle in den HTML-Code-Editor dieses Textfeldes. Das ist auf meiner Seite dann diese Tabelle, die Ihr dann natürlich mit Eurem Inhalt beschreiben müsst und beliebig erweitern könnt (Spalten und Zeilen - ich habe in meinem Beispiel noch eine Spalte mehr als in dieser Tabelle):

<table class="sortable" id="MyTable" cellpadding="0" cellspacing="0">
   <tr>
      <th>Nummer</th>
      <th>Alphabet</th>
      <th>Datum</th>
      <th>Betrag</th>
      <th class="unsortable">Beschreibung</th>
   </tr>
   <tr>
      <td>1</td>
      <td>U</td>
      <td>2006-01-01</td>
      <td>&euro; 5.00</td>
      <td>unsortiert</td>
   </tr>
   <tr>
      <td>2</td>
      <td>Z</td>
      <td>2005-04-02</td>
      <td>&euro; 6.70</td>
      <td>unsortiert</td>
   </tr>
   <tr>
      <td>3</td>
      <td>w</td>
      <td>2006-08-17</td>
      <td>&euro; 6.50</td>
      <td>unsortiert</td>
   </tr>
   <tr>
      <td>4</td>
      <td>X</td>
      <td>2005-01-01</td>
      <td>&euro; 4.20</td>
      <td>unsortiert</td>
   </tr>
   <tr>
      <td>5</td>
      <td>V</td>
      <td>2006-05-02</td>
      <td>&euro; 7.15</td>
      <td>unsortiert</td>
   </tr>
   <tr>
      <td>6</td>
      <td>y</td>
      <td>2012-04-12</td>
      <td>&euro; 5.25</td>
      <td><span style="color:#0000FF">Thomas Testeintrag</span></td>
   </tr>
   <tr class="sortbottom">
      <td>Positionen 6</td>
      <td></td>
      <td></td>
      <td>Gesamt &euro; 34.80</td>
      <td></td>
   </tr>
</table>

Wie Ihr oben erkennen könnt, habe ich das Datum in diesem Format 2012-04-12 eingetragen, da sonst das Datum nicht richtig sortiert wird, obwohl das in der .js-Datei eigentlich angegeben wurde. Es muss also leider an dieser Stelle noch ein Fehler vorhanden sein, den ich bisher noch nicht lokalisieren konnte. Auch in der Beispiel-Seite “example.html” vom Autor funktioniert das nicht. Guckt dazu auch in Tutorial 2.

Öffnet nun noch mit Eurem “WordPad” oder “Windows-Editor” die Datei sortable.js und passt den Pfad zu den .gif Dateien an. Denkt bitte an die korrekte relative Pfadangabe. Von der Home mit einem Punkt ./ und von einer Unterseite mit 2 Punkten ../

Bei mir sieht das dann so aus:

/* You can change these values */
var image_path = "./assets/images/";
var image_up = "arrow-up.gif";
var image_down = "arrow-down.gif";
var image_none = "arrow-none.gif";
var europeandate = true;
var alternate_row_colors = true;

nach oben

Viel Erfolg !