Accessibility   jQuery   Open Source   Studium
10.12.200914:10

Barrierefreie, sortierbare Tabellen mit jQuery

Im vorerst letzten Blogpost, zu den während meiner Diplomarbeit bei Namics entstandenen  jQuery Accessible Rich Internet Appllications, stelle ich sortierbare Tabellen vor. Mit dem Widget lassen sich standardkonforme HTML Tabellen sehr einfach um einige nützliche Funktionen erweitern oder man nutzt es als Grundlage komplexer Anwendungen in denen tabellarisch Daten dargestellt werden.

 

 

Andere Blog-Posts zu meiner Diplomarbeit:

Features

Einerseits ist möglich eine kleine Tabelle lediglich um eine reine Sortiermöglichkeit (nach Datum, Zahlen zu erweitern. Diese wird per CSS Klasse für jede Spalte definiert und kann derzeit nach Datum oder Zahlen (jeweils in deutscher oder internationaler Schreibweise) bzw. einfach alphabetisch erfolgen. Es bleibt möglich server-seitige Sortierung für spezielle Sortierungen oder User ohne Aktiviertes Java-Script anzubieten (Graceful Degradation).

 

Für komplexere und größere Tabellen kann ein bestimmte Menge an Spalten und Zeilen versteckt werden – für ausgeblendete Zeilen ist ein Pager integriert. Im allgemeinen ist das Widget darauf ausgelegt auch für  komplexe Anforderungen anpassbar zu sein – hierzu wird am besten einen Blick auf die Functional Demo bzw. in die demo.js (in der ich zeige was möglich ist) geworfen. In meiner Diplomarbeit gehe ich auch auf die genaue Arbeitsweise des Widgets ein.

 How To

 

Nachdem die benötigten Scripte eingebunden wurden, sollte unser Ausgangspunkt immer eine valide HTML Tabelle sein:


<table summary="Eine kurze Zusammenfassung was diese Tabelle enthält oder aussagt.">
	<caption>Demo Tabelle</caption>
	<thead>
		<tr>
			<th class="ui-table-asc ui-state-active ui-table-number">UID</th>
			<th class="ui-table-number-de" style="min-width: 10em; color: red;">Decimal DE</th>
			<th class="ui-table-deactivate"><a href="#server_site_order_only">false</a></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>119,111</td>
			<td>Lorum ipsum</td>
		</tr>
		<tr>
			<td>2</td>
			<td>123,456</td>
			<td>Lorum ipsum</td>
		</tr>
		<tr>
			<td>3</td>
			<td>666,666</td>
			<td>Lorum ipsum</td>
		</tr>
		.
		.
		.
	</tbody>
</table>
Tabellen Konstruktion

Wie bereits oben erwähnt werden auch per CSS Klassen die Eigenschaften jeder Spalte festgelegt. Für eine genaue Beschreibung bitte einen Blick in das Wiki bei GitHub werfen.

Die Tabellenköpfe (und damit zum Beispiel die Breite jeder Spalte) können nach belieben mit CSS gestaltet werden --  sie bleiben, im Gegensatz zum tbody, erhalten.

 

Für eine kleine Tabelle wie in unserem Beispiel würde der bloße Aufruf des Widgets bereits genügen, ich möchte hier aber noch einige Optionen vorstellen:

 

 


$(function() {
	$("table").ariaSorTable({
		rowsToShow: 10,
		pager: true,
		colsToHide: {
			1: true
		}
	});
});

In diesem Fall gebe ich an das maximal 10 Zeilen angezeigt werden und dafür der pager genutzt werden soll. Außerdem verstecke ich die erste Spalte.

 

Da auch in der Functional Demo davon Gebrauch gemacht wird, möchte ich hier noch kurz zeigen wie man auf die (pseudo) öffentlichen Methoden des Widgets zugreifen kann. Dabei beziehe ich mich auf das oben gezeigte minimal Beispiel.

 

 


// Widget Instanz holen
var widget = $("table");
// colsToHide Options-Array holen
var colsToHide = widget.ariaSorTable("option", "colsToHide");
// Änderungen am Array durchführen!
// Update der Tabellen Arrays und Neuzeichnung
widget.ariaSorTable('updateData');
widget.ariaSorTable('setHTML');

Hier sieht man wie  die Sichtbarkeit der Spalten von außen und im Nachhinein geändert werden kann.

Demo und Download

jQuery Accessible RIA  sorTable Demo @ GitHub

 

Wiki @ GitHub

 

 

Wie allen anderen Widgets dieser Serie steht auch dieses unter Creative Commons BY-SALizenz und kann demzufolge auch für kommerzielle Projekte genutzt werden.

 

Die Widgets befinden sich weiterhin in Entwicklung und werden aktiv betreut. Kommentare, Bugs, Vorschläge oder Eigenentwicklungen sind mehr als Willkommen. Bitte kontaktiert mich in den Kommentaren oder über das Kontaktformular – am besten natürlich direkt bei GitHub wenn du ein Konto hast.

 

 

Felix NagelGravatar: Felix Nagel
PermalinkTrackbackShare

Kommentar schreiben

Felder mit * sind Pflichtfelder

Firefox 2 wird eigentlich nicht mehr unterstützt

7 Kommentare

#
17.02.201012:30

servus...


kann es sein, dass die String Sortierung nicht funktioniert in deinem Sortier Ding ?


fnagel.github.com/jQuery-Accessible-RIA/Table/index.html


Sortiere mal die letzte Spalte.


Da wird immer anders sortiert. Oder blick ich die Funktionweise grad nicht ?

Konnte es jetzt noch nicht selbst an einem Script ausprobieren, sondern nur deine Demos anschauen.


über eine Antwort was da los ist würde ich mich freuen.

Danke.

swGravatar: sw
#
17.02.201013:46

Ich kann da leider kein Problem...

...erkennen. Es wird ganz normal sortiert, soweit ich erkennen kann. Kannst du mir genauer beschreiben was du tust? Vielleicht workt es auch nur so, die Dummy Daten sind nicht ganz optimal. Sicher das du nicht auf verschiedenen Seiten warst?


Mal abgesehen davon das HTML eben nicht unterstützt wird und der Link deshalb ganz oben steht. HTML Sortierung wollte ich aber ohnehin mal machen, also:

github.com/fnagel/jQuery-Accessible-RIA/issues


 

Felix NagelGravatar: Felix Nagel
http://www.felixnagel.com
#
17.02.201013:55

servus...


also ich antworte jetzt nochmals hier, weil ich sonst nicht weiss wo.


Also ich gehe auf:

fnagel.github.com/jQuery-Accessible-RIA/Table/


Und dort wsortiere ich nun die "String" Spalte, indem ich immer wieder auf "String" klicke. Dabei sollten ja nur 2 Sortierungen rauskommen einmal aufsteigend und einmal absteigend. Bei den anderen Spalten "Decimal DE" oder "UID" funktioniert das auch, aber bei "String" nicht. Dort bekomme ich jedesmal eine andere Sortieung als quasi Ergebnis angezeigt.

Also immer wieder eine andere willkürliche Sortierung ohne erkennbare Sortierstrucktur.

Also immer wieder zufällig.


OS: WinXP SP2

Browser: Firefox 2.0.0.18


Ich werde es heute Abend mal auf einem anderen System + Browser + Loakl austesten, ob das da auch so ist oder nur hier !


 

swGravatar: sw
#
17.02.201014:18

Firefox 2 wird eigentlich nicht mehr unterstützt

Ehrlich gesagt hab ich mit FF2 nie getestet. Bestätigen kann ich den Fehler aber. Woran das liegt müsste ich mal sehen, aber ich sehe da auch kaum einen Sinn drin. Priorität hat aber in jeden Fall die Portierung für die neuen Versionen von jQuery und UI. Hab mal nen Issue aufgemacht, wenn ich dazu komme werd ich sehen das ich das fixe. Vielleicht kannst du ja auch dabei helfen:


github.com/fnagel/jQuery-Accessible-RIA/issues/issue/23


jQuery UI kickt übrigens gerade den Support für FF 2 und außerdem gibt es seit über einem Jahr keine Sicherheitspatches mehr.

Felix NagelGravatar: Felix Nagel
http://www.felixnagel.com
#
17.02.201014:19

so ich nochmal...


also es ist wirklich ein Fehler (zumindest bei mir).

aber die String Sortierung ist reproduzierbar und nicht zufällig, sondern folgt bestimmten reglen und wird immer gleich "sortiert".


Hier mal meine Beweise.

Nach 12 Klicks ist die Sortierung wieder die selbe wie am Anfang.

Sprich man klick 12 mal auf Sortierung und gelangt wieder zur Ausgangsliste.


Desweiteen jetzt mal die ersten 3 Kliks mit den UIDs um das zu vergleichen.

1. Klick - UID 3 + 2 + 4 + 5...

2. Klick - UID 61 + 3 +1 + 60 ...

3. Klick - UID 1 + 3 + 60 ...

und so weiter.

Diese Abfolge ist immer die Gleiche !


Eventuell hilft dir das bei der Fehlersuche.

swGravatar: sw
#
17.02.201014:24

Gesehen?

Hatte schon geantwortet, weiß nicht ob du das gesehen hast:


www.felixnagel.com/blog/artikel/2009/12/10/barrierefreie-sortierbare-tabellen-mit-jquery/

Felix NagelGravatar: Felix Nagel
http://www.felixnagel.com
#
17.02.201014:32

ja hatte es schon gesehen.

Nun gut also scheint es wohl nur im FF2 aufzutreten das Problem.

Mal schauen inwiefern das bei meinen zu verwendeten Zwecken zu Problemen führen könnte.


Danke.

swGravatar: sw