Tim Tepaße: Ein Ad-Hoc Tutorial in Tabular Data Control Data Modell des IE

Beitrag lesen

Fortsetzung:

Was muss ich tun damit er mir die 2.Textzeile anzeigt ohne die erste???

Du musst erst festlegen, dass eine „Page“ nur einen Datensatz (Textzeile) umfasst und dann anweisen zur nächsten Page zu springen. Ersteres machst Du mit der Angabe von datapagesize="1". Für zweiteres gibt es eine Javascript-Methode.

Aber erst mal kümmern wir uns um die Kontrollelemente zu Blättern. Das ist es nämlich, was Du willst, vermute ich? Deine Tabelle sieht jetzt so aus:

Benutzer   Passwort   Drucker

Amélie     nino       collignon

← | →

Mit den Pfeilen wechselt man dann zwischen den einzelnen Datensätzen. In HTML würde ich die so einbinden:

</table>  
<p class="pagecontrols"><span>&larr;</span> | <span>&rarr;</span></p>

Anstatt die Pfeilsymbole direkt einzufügen habe ich Entities dafür genommen, lass Dich nicht davon verwirren, ebe

Damit beim Klicken auf die Pfeile etwas geschieht, brauchen wir sogenannte Event-Handler, genauer den Handler onclick:

<span onclick="tue was">&larr;</span>

Was soll getan werden? Man muss die Tabelle anweisen, die nächste „Page“ aus den Daten zu nehmen. Wo die Daten sind, weiss die Tabelle inzwischen selber, aber wir wissen noch nicht, wo die Tabelle ist. Dazu nutzen wir getElementById. Zuerst wird die Tabelle mit der ID „view“ ausgestattet ...

<table datasrc="#data" datapagesize="1" id="view">

... dann kriegen wir auch ein Ergebnis, wenn wir in Javascript das Element mit dieser ID anfordern:

document.getElementById("view")

Tabellen, die an Daten gebunden sind, haben in Internet Explorern vier weitere Methoden, mit denen man zwischen den angezeigten Pages navigieren kann:

firstPage()    – springt zur ersten möglichen Page
lastPage()     – springt zur letzten möglichen Page
previousPage() – springt zu vorherigen Page
nextPage()     – springt zur nächsten Page

Uns interessieren nur die letzten beiden Methoden fürs Blättern. Der JS-Befehl, eine Page vorzublättern sieht dann so aus:

document.getElementById("view").nextPage()

Dieses wird einfach in den Event-Handler reingepackt:

<span onclick="[code lang=javascript]document.getElementById("view").nextPage()">&rarr;</span>[/code]

Analog geht es für das Zurückblättern. Du merkst hier bestimmt die Beschränkung, die diese Methoden mitbringen. Microsoft hat in seiner unergründlichen Weisheit nicht daran gedacht, Informationen mitzubringen, wieviele Pages es gibt oder ob man sich an der ersten oder letzten Stelle in den Liste der Pages befindet. Das wäre sehr praktisch, man könnte die Tabelle, die Kontrollen zum Blättern oder sonstige Anzeigemöglichkeiten modifizieren, um dem Nutzer anzuzeigen, dass man nicht mehr weiter blättern könnte. Geht aber nicht. Doof.

Nebenbei: Du kannst diese Methoden auch sonstwo in JS benutzen, Du bist nicht auf die Event-Handler angewiesen. Du könntest beispielsweise beim Laden der HTML-Seite direkt auf einen bestimmten Datensatz springen – dummerweise nur durch wiederholtes Aufrufen von nextPage(), da Microsoft eine extrem praktische Methode jumpToPage(i) vergessen hat.

Nebenbei: Das hier Vorgestellte und Dein Anwendungszweck sind aus der konzeptionellen Sicht genau das, was auch in dem SELFHTML-Beispiel Datei dynamisch in Tabelle einbinden vorgestellt wird. Zugegeben, die Erklärung ist etwas kompliziert, aber etwas Abstrahieren wäre wohl drin.

Nebenbei: Ich habe gerade die Event-Handler an span-Elemente gepackt, weil ich Nachteile von Buttons oder Links vermeiden wollte. Dadurch merkt der Benutzer nicht, dass die Dinger klickbar sind, also sollte man mit CSS die span-Elemente mit einem entsprechenden Cursor ausweisen: .pagecontrols span {cursor:pointer;}.

Fazit: Du merkst, für den Einsatz im Web ist diese Technik kritisch, zuallererst wird der Gurkenbrowser Internet Explorer und dessen aus Sicherheitssicht bedenkliche Erweiterungen ActiveX vorausgesetzt, dann braucht man auch noch Javascript zum Blättern, wobei das Deaktivieren von Javascript eines der Dinge ist, die man machen kann, um die Sicherheit im IE zu erhöhen. Ich würde das auf keinen Fall in der freien Wildbahn einsetzen.

Und ja, man kann alles durch andere Techniken ersetzen, die dann auch in anderen Browsern funktionieren. Ist zwar nicht so bequem und auch etwas komplizierter, weil man sich vieles selbst schreiben muss, aber Raktenwissenschaft isses auch nicht. Aber ich werde das nicht noch dokumentieren. ;)

Tim